texto - obtener valor seleccionado select javascript

¿Cómo obtener el valor del elemento seleccionado en reaccionar-bootstrap?

Question

Así que estoy tratando de obtener el valor de un elemento select en reactjs, pero simplemente no puedo entenderlo. El valor this.refs.selectElement.getDOMNode().value siempre viene como undefined . Todos los otros controles en el formulario como text funcionan bien. ¿Algunas ideas? ¿Es que no puede obtener el valor del elemento select través de onChange y debe usar el evento onChange ?

Actualizado:

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>
    )
  }
});

Actualizado: Solución Por lo tanto, si alguien encuentra algo similar, aparentemente si está utilizando reaccionar-bootstrap no puede acceder al elemento de Input si lo ha envuelto en un ListGroup . Puede eliminarlo o envolver todos los elementos de Input en una etiqueta <form> . Esto resolvió mi problema, gracias por toda la ayuda.

Answer 1

¡Hay otra manera más fácil! si usa el componente <FormGroup> y establece los apoyos de controlId , el DOM interno ( <input> , ...) obtendrá ese controlId como su atributo id . por ejemplo:

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

Luego tendrá el valor llamando a document.getElementById :

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

Answer 2

Haga una función handleChange (). Luego, póngalo en su render () de esta manera:

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

Y la función en el componente:

handleChange: function(e) {
  var val = e.target.value;
},

Answer 3

Las referencias como cadenas se consideran heredadas y pueden estar obsoletas . Pero parece que los componentes reaccionar-bootstrap no funcionarán con los refs de devolución de llamada. Estuve trabajando en esto hoy para manejar una entrada de búsqueda.

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" />
    // ...
  }
}

Terminé agarrando el evento de cambio y obteniendo el valor de eso. Esto no se siente como "Reaccionar" o muy actual, pero funciona.

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" />
    // ...
  }
}

Answer 4

Ninguno de los anteriores funcionó para mí. De hecho, tuve que pasar por la jerarquía DOM para encontrar una forma de extraer el valor. PD: No ReactBootstrap.ListGroup en mi código. Solo la Input de React Bootstrap. Aquí está mi código (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;
}

Dependencias:

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

Answer 5

Si está aquí como yo usando el último componente de FormControl , aquí hay una solución que hice:

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>
    }
}

Answer 6

Veo que está utilizando react-bootstrap , que incluye un contenedor alrededor de los elementos de entrada regulares.

En este caso, debe usar la función del contenedor getInputDOMNode() para obtener el elemento DOM real de la entrada subyacente. Pero también puede usar la función de conveniencia getValue() que reacts-bootstrap proporciona para los elementos de entrada .

Entonces su función _handleDube debería verse así:

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

Consulte este JSFiddle para obtener un ejemplo completo: http://jsfiddle.net/mnhm5j3g/1/

Answer 7

es bastante simple:

en el método de renderizado debes vigilar el 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>

y su controlador es como:

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

Answer 8

"react": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-dom": "^15.0.2",

en el env, ReactDOM.findDOMNode () funciona para mí.

en render ():

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

en controlador ():

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