Как получить значение элемента select в реакции-бутстрап?

Ответ 1

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

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

Итак, ваша функция _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/

Ответ 2

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

в методе рендеринга вы должны следить за 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)
}

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

Ничто из этого не помогло мне. Мне действительно пришлось пройти через иерархию 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",

Ответ 6

Ссылаются на строки считаются устаревшими и могут быть устаревшими. Но похоже, что компоненты реакции-бутстрапа не будут работать с refback обратного вызова. Сегодня я работал над этим поиском.

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

Ответ 7

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

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

Затем вы получите значение, вызвав document.getElementById:

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

Ответ 8

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

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

class Blah extends Component {
    getSelectValue = () => {
        /* Here 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>
    }
}