如何在React中从<select>中获取元素的Id？

Question

我有一个函数handleSubmit(event){}。如何获取所选选项的 id？

<select id="category">
   <option id="1">Travel</option>
   <option id="2">Auto Loan</option>
</select>

Answer 1

我认为你应该使用值而不是 ID。但如果你非常需要所选选项的 ID 那么你可以尝试这个- handleChange = (event) => {      const index = event.target.selectedIndex;      const optionElement = event.target.childNodes[index];      const optionElementId = optionElement.getAttribute('id');      console.log(optionElementId);  }选择列表是-<select onChange={this.handleChange}>    <option id="1">Travel</option>    <option id="2">Autoloan</option></select>

Answer 2

HTMLSelectElement元素有selectedIndex属性。使用它和孩子列表，您可以获得孩子的属性：<select id="category" onChange={this.selectChanged}>    <option id="1">Travel</option>    <option id="2">Auto Loan</option></select>selectChanged(event){    const select = event.target;    const id = select.children[select.selectedIndex].id;    //now you can store the id's value to state or somewhere else}如果您需要进入id表单提交处理程序，您必须通过 id 查找select，然后执行相同的操作：onSubmit(event) {    const form = event.target;    const select = form.elements.namedItem('category');    const id = select.children[select.selectedIndex].id;}

Answer 3

您可以使用来完成此操作value，例如创建此状态和函数const [category, setCategory] = useState("1");const handleChange = (e) => { setCategory(e.target.value) }那么你可以这样做<select value={category} onChange={this.handleChange}>&nbsp; &nbsp; <option value="1">Travel</option>&nbsp; &nbsp; <option value="2">Autoloan</option></select>

Answer 4

根据reactjs.org&nbsp;https://reactjs.org/docs/forms.html#the-select-tag，&nbsp;该<select>元素在react中与HTML略有不同。在 HTML 中，<select>创建一个下拉列表。例如，此 HTML 创建一个口味下拉列表：<select>&nbsp; <option value="grapefruit">Grapefruit</option>&nbsp; <option value="lime">Lime</option>&nbsp; <option selected value="coconut">Coconut</option>&nbsp; <option value="mango">Mango</option></select>请注意，由于选定的属性，椰子选项最初被选中。React 不使用这个选定的属性，而是使用根标签上的value属性。这在受控组件中更方便，因为您只需在一处更新它。例如：selectclass FlavorForm extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {value: 'coconut'};&nbsp; &nbsp; this.handleChange = this.handleChange.bind(this);&nbsp; &nbsp; this.handleSubmit = this.handleSubmit.bind(this);&nbsp; }&nbsp; handleChange(event) {&nbsp; &nbsp; this.setState({value: event.target.value});&nbsp; }&nbsp; handleSubmit(event) {&nbsp; &nbsp; alert('Your favorite flavor is: ' + this.state.value);&nbsp; &nbsp; event.preventDefault();&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <form onSubmit={this.handleSubmit}>&nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Pick your favorite flavor:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select value={this.state.value} onChange={this.handleChange}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="grapefruit">Grapefruit</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="lime">Lime</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="coconut">Coconut</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="mango">Mango</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" value="Submit" />&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; );&nbsp; }}