带有 onClick 的下拉菜单答案

【问题标题】：Dropdown menu with onClick带有 onClick 的下拉菜单
【发布时间】：2022-07-05 23:25:39
【问题描述】：

我正在尝试创建一个包含 3 个选项的下拉菜单。一旦选择了一个选项，它就会触发一个状态的改变。我尝试了几种不同的方法，但都不起作用。

这是第一次尝试：

<div className='dropDownDiv'>
  <select>  
    <button onClick={()=> setResultsPerPage(6)}>6 Results</button>
    <button onClick={()=> setResultsPerPage(9)}>9 Results</button>
    <button onClick={()=> setResultsPerPage(15)}>Max sites</button>
  </select>
</div>

然后我尝试了这个：

<div className='dropDownDiv'>
  <select>  
    <option onClick={()=> setResultsPerPage(6)}>6 Results</option>
    <option onClick={()=> setResultsPerPage(9)}>9 Results</option>
    <option onClick={()=> setResultsPerPage(15)}>Max sites</option>
  </select>
</div>

第二次尝试显示下拉菜单中的选项，但仍然没有触发 onClick。知道我做错了什么吗？

谢谢！

【问题讨论】：

标签： reactjs drop-down-menu state html-select

【解决方案1】：

对于select tags，您希望在父select 元素上添加change event listener，而不是单独的option 元素。

option 元素应该有一个value，然后在onChange 处理程序中从事件的target 中读取。

function Form() {
    const [resultsPerPage, setResultsPerPage] = React.useState(6);

    return (
        <div>
            <select value={resultsPerPage} onChange={(event) => setResultsPerPage(event.target.value)}>
                <option value={6}>6 Results</option>
                <option value={9}>9 Results</option>
                <option value={15}>Max sites</option>
            </select>
            <p>Results per page: {resultsPerPage}</p>
        </div>
    );
}

ReactDOM.render(<Form />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>

<div id="app"></div>

【讨论】：