Javascript 如何在react引导中获取select元素的值？

所以我试图在reactjs中获取select元素的值，但就是想不出来。this.refs.selectElement.getDOMNode.value始终是未定义的。表单上的所有其他控件（如文本）都工作正常。有什么想法吗？您是否无法通过refs获取select元素的值，而必须使用onChange事件

更新：

var TestSelectClass=React.createClass{ mixins:[路由器.导航]， _handleDube:functionevent{ DubeActionCreators.DubeTest{ 消息：this.refs.message.getDOMNode.value， tax:this.refs.tax.getDOMNode.value， 有效性：this.refs.valid\u for.getDOMNode.value }; }, 渲染：函数{ 回来 $ 1小时 一天 5天 } }; 我看到您正在使用，它包括一个围绕常规输入元素的包装器

在这种情况下，需要使用包装器函数来获取底层输入的实际DOM元素。但是你也可以使用方便的功能

因此，您的_handleDube函数应该如下所示：

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

---

有关完整示例，请参阅此JSFIDLE:

生成函数handleChange。然后，将其放入渲染中，如下所示：

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

---

以上这些都不适合我。实际上，我必须通过DOM层次结构来找到一种提取值的方法。 PS：我的代码中没有使用ReactBootstrap.ListGroup。只是来自React引导的输入。这是我的代码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",

很简单：

在render方法上，您应该关注bindthis

在env下，ReactDOM.findDOMNode适合我

在渲染中：

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

引用作为字符串。但react引导组件似乎无法与回调引用一起工作。我今天正在做这个来处理搜索输入

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

---

还有一个简单的方法！如果使用组件并设置controlId道具，则内部DOM。。。将获取该controlId作为其id属性。例如：

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

---

如果您像我一样在这里使用最新的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>
    }
}

---

你能发布你的代码吗？我已经用代码更新了。你可以设置ref=selectElement。@julen这只是一个例子。请看代码，我确实为设置了ref=valid\u，然后通过this.refs.valid\u for.getDOMNode.value访问它。为什么使用输入而不是选择？不起作用。getInputDOMNode是未定义的。它确实可以工作，我添加了一个JSFIDLE来展示一个示例。你是对的，它确实可以工作。然而，由于某些原因，它在我的应用程序中不起作用，我会接受答案，因为它是正确的。感谢React中的API更改，现在上面的getDOMNode应该读取React.findDOMNodethis.refs.message.value之类的内容。在React 15.2.1中，this.refs.message.value似乎读取了该值。是的，这就是我现在正在做的，但问题是我们不能对选定元素使用refs吗？谢谢，帮了我很多忙！：这是最好的方法。出于性能原因，最好将回调绑定到组件的构造函数中，而不是像这样内联。我能知道为什么这个答案最初被否决吗？我真的是一个新手，我想知道这是否是一个正确的实现。@NivedithaKarmegam自从我加入以来，我一直在这里讨论同样的问题，人们没有给出答案就投票反对，这是一个真正的问题。关于你的问题，这是否是一个正确的实现，这取决于，在写这个答案的时候，我不确定最近的更新。所以我的个人哲学是，如果它有效，你不需要费心去更新你的库，并且想要提高效率，那么这种方法适合你。否则，react引导文档是您最好的朋友，因为即使是在SO接受的答案也会过时。

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

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

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

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

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