如何在ReactJS中获取下拉菜单的选定值

Question

如何在ReactJS中获取下拉菜单的选定值

javascriptselectdrop-down-menumenureactjs

104

我正在使用React，希望能够获取下拉菜单中已选择选项的值，但不知道该如何实现。有什么建议吗？谢谢！我的下拉菜单就是一个类似这样的选择框：

<select id = "dropdown">
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

- BlueElixir

alert(dropdown.value) - dandavis

额外说明：我想使用select并将一个值传递到一个方法中。请仅返回翻译后的文本。 - BlueElixir

1

<select onchange=method(value)>，或者使用更复杂的 off-side 绑定，或者在 JS 中使用 method(drowdown.value)。 - dandavis

1

请参考此链接：https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html - Abhisek Mishra

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- S_99_chandra · Answer 1

import {React, useState }from "react";

function DropDown() {

const [dropValue, setDropValue ]= useState();

return <>
    <div>
        <div class="dropdown">
          <button class="btn btn-secondary" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            {dropValue==null || dropValue=='' ?'Select Id':dropValue}
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" onClick={()=> setDropValue('Action')} href="#">Action</a></li>
            <li><a class="dropdown-item" onClick={()=> setDropValue('Another action')} href="#">Another action</a></li>
            <li><a class="dropdown-item" onClick={()=> setDropValue('Something else here')} href="#">Something else here</a></li>
          </ul>
        </div>
    </div>
   </>
}

export default DropDown

- jerryurenaa · Answer 2

你可以在同一个函数中处理所有内容，如下所示。

<select className="form-control mb-3" onChange={(e) => this.setState({productPrice: e.target.value})}>

  <option value="5">5 dollars</option>
  <option value="10">10 dollars</option>
                                         
</select>

当用户选择一个选项时，它会设置一个状态并获取所选事件的值，无需进一步编码要求！

- Pradeep Kumar · Answer 3

<select value ={this.state.value} onChange={this.handleDropdownChange}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

- Surii · Answer 4

如Karen所述，您可以直接使用触发事件的目标值。以下是代码的一小段示例。

                 `<select class="form-select py-2" 
                  onChange={(e) => setVotersPerPage(e.target.value)}>
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  </select>`