javascript - 如何在ReactJS中获取下拉菜单的值

Question

我正在尝试获取如下所示的下拉菜单的值:

<ul className="tabs" data-component={true}>
    <li>
      <section className="sort-list" data-component={true}>
         <select value={0} className="sort" data-element={true}>
           <option key="0" value="0">Any Topic</option>
           <option key="1" value="1">Art</option>
           <option key="2" value="2">Auto</option>
      //...and so on

我见过类似的问题，但尝试 alert(sort).value 不起作用(以及其他一些变体)，所以我认为我需要将我的选择器串在一起？

我可以使用值或文本，因为目标是即使用户返回上一页也保持应用过滤器。

如何获取选项的键、值或文本？

Answer 1

您需要将 onchage 事件添加到您的选择中。

change = (event) => {
  this.setState({
    topic: event.target.value
  })
}

<select onChange={this.change} value={0} className="sort" data-element={true}
  <option key="0" value="0">Any Topic</option>
  <option key="1" value="1">Art</option>
  <option key="2" value="3">Auto</option>
</select>

演示

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      topic: ''
    };
  }

  change = (event) => {
    this.setState({
      topic: event.target.value
    })
  }

  render() {
    return (
      <div>
        
        <p>
          Selected topic: {this.state.topic}
        </p>
         <select onChange={this.change} className="sort" data-element={true}>
           <option key="0" value="0">Any Topic</option>
           <option key="1" value="1">Art</option>
           <option key="2" value="2">Auto</option>
           </select>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>