Как получить значение элемента select в react-bootstrap?

поэтому я пытаюсь получить select значение элемента в reactjs, но просто не могу понять. The this.refs.selectElement.getDOMNode().value всегда приходит как undefined. Все остальные элементы управления на форме, как text работают хорошо. Есть идеи? Это то, что вы не можете получить значение select элемент через refs и onChange событие?

обновление:

var TestSelectClass = React.createClass({
  mixins: [Router.Navigation],

  _handleDube: function(event) {
    DubeActionCreators.DubeTest({
      message: this.refs.message.getDOMNode().value,
      tax: this.refs.tax.getDOMNode().value,
      validity: this.refs.valid_for.getDOMNode().value
    });
  },

  render: function() {
    return (
      <ReactBootstrap.ListGroup>
          <textarea
            className="form-control"
            rows="3"
            placeholder="Enter message"
            ref="message" >
          </textarea>
          <div className="input-group">
            <span className="input-group-addon" id="basic-addon1">$</span>
            <input type="text" className="form-control" placeholder="10" aria-describedby="basic-addon1" ref="tax" />
          </div>
        <Input type="select" value="1" ref="valid_for">
          <option value="1">1 hour</option>
          <option value="2">1 day</option>
          <option value="2">5 days</option>
        </Input>
      </ReactBootstrap.ListGroup>
    )
  }
});

Изменение: Решение Итак, если кто-то сталкивается с чем-то подобным, по-видимому, если вы используете react-bootstrap, вы не можете добраться до Input элемент, если вы завернули его в ListGroup. Либо выньте его из него, либо оберните все Input элементов <form> тег. Это решило мою проблему, спасибо за всю помощь.

31
javascript react-bootstrap reactjs

8 ответов

Я вижу, вы используете react-bootstrap, который включает обертку вокруг обычных входных элементов.

в этом случае вам нужно использовать getInputDOMNode() функция оболочки, чтобы получить фактический элемент DOM базового ввода. Но вы также можете использовать getValue() функции комфорта, что react-bootstrap обеспечивает входные элементы.

так что ваши _handleDube функция должна выглядеть например:

  _handleDube: function(event) {
    DubeActionCreators.DubeTest({
      message: this.refs.message.getInputDOMNode().value,
      tax: this.refs.tax.getInputDOMNode().value,
      validity: this.refs.valid_for.getValue()
    });
  },

см. этот jsfiddle для полного примера:http://jsfiddle.net/mnhm5j3g/1/

31

Это довольно просто:

на методе рендеринга вы должны следить за bind(this)

<select onChange={this.yourChangeHandler.bind(this)}>
  <option value="-1" disabled>--</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

и ваш обработчик такой:

yourChangeHandler(event){
  alert(event.target.value)
}
40

сделайте функцию handleChange (). Затем поместите его в свой render () следующим образом:

<Input type="select" value="1" ref="valid_for" onChange={this.handleChange}>

и функция в компоненте:

handleChange: function(e) {
  var val = e.target.value;
},
13
"react": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-dom": "^15.0.2",

под env, ReactDOM.findDOMNode () работает для меня.

в render ():

<FormControl name="username" ref="username"/>

в обработчик():

const username = findDOMNode(this.refs.username);
6

ничего из вышеперечисленного не сработало для меня. Мне действительно пришлось пройти через иерархию DOM, чтобы придумать способ извлечения значения. PS: Я сделал не использовать ReactBootstrap.ListGroup в моем коде. Просто Input из React Bootstrap. Вот мой код (ES6+).

import ReactDOM from 'react-dom';

getValueFromSelect(ref){
    var divDOMNode = ReactDOM.findDOMNode(ref);
    /* the children in my case were a label and the select itself. 
       lastChild would point to the select child node*/
    var selectNode = divDOMNode.lastChild;
    return selectNode.options[selectNode.selectedIndex].text;
}

зависимости:

    "react": "^0.14.3",
    "react-bootstrap": "0.28.1",
    "react-dom": "^0.14.3",
3

ссылки как строки считается устаревшим и может быть исключен. Но кажется, что компоненты react-bootstrap не будут работать с ссылками обратного вызова. Я работал над этим сегодня, чтобы обработать поисковый запрос.

class SearchBox extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.props.updateQuery(this._query.value);
  }

  render() {
    // ...
    <FormControl
      onChange={this.handleChange}
      ref={(c) => this._query = c} // should work but doesn't
      value={this.props.query}
      type="text"
      placeholder="Search" />
    // ...
  }
}

Я закончил тем, что схватил событие изменения и получил от него значение. Это не ощущается "реактивным способом" или очень текущим, но это работает.

class SearchBox extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.updateQuery(e.target.value);
  }

  render() {
    // ...
    <FormControl
      onChange={this.handleChange}
      value={this.props.query}
      type="text"
      placeholder="Search" />
    // ...
  }
}
1

есть еще один простой способ! если вы используете <FormGroup> компонент и установить controlId реквизит, внутренний дом (<input>, ...) получит то controlId как его . например:

<FormGroup controlId="myInputID">
  <ControlLabel>Text</ControlLabel>
  <FormControl type="text" placeholder="Enter text" />
</FormGroup>

тогда у вас будет значение, вызвав document.getElementById:

var myInputValue = document.getElementById("myInputID").value;
0

Если вы здесь, как я, используя последнюю FormControl компонент вот решение, которое я сделал:

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Blah extends Component {
    getSelectValue = () => {
        /* Here's the key solution */
        console.log(ReactDOM.findDOMNode(this.select).value)
    }

    render() {
        return
        <div> 
            <FormControl
            ref={select => { this.select = select }}
            componentClass="select"
            disabled={this.state.added}
            >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </FormControl>
            <Button onclick={this.getSelectValue}>
                Get Select value
            </Button>
        </div>
    }
}
0