Question

我有类似的东西

handleClick:function(){
    // click logic
},
render: function(){
  return (
    <select>
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
    <button onClick={this.handleClick}>Get Selected Value</button>
  );
}

点击select后如何获取button元素的值？

Answer 1

您添加对选择

的引用

handleClick:function(){
    var value = React.findDOMNode(this.refs.mySelect).value;
},
render: function(){
  return (
    <select ref="mySelect">
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
    <button onClick={this.handleClick}>Get Selected Value</button>
  );
}

Answer 2

虽然您可以获取select的DOM节点并查找当前值，但我发现使用组件状态更简单。像这样：

var React = require('react/addons');

var App = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function () {
    return {
      option: 'a'
    };
  },
  handleClick: function () {
    alert(this.state.option);
  },
  render: function () {
    return (
      <select valueLink={this.linkState('option')}>
          <option value="a">A</option>
          <option value="b">B</option>
      </select>
      <button onClick={this.handleClick}>Get Selected Value</button>
    );
  }
});

LinkedStateMixin mixin确保对选择框的任何更改都会自动将该值同步到组件状态。但另一方面，您可以更新状态，LinkedStateMixin将确保选择框获得新值。

React - 在按钮点击时访问所选选项？

2 个答案: