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

4回答

明月笑刀无情

我认为你应该使用值而不是 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>

0 0

万千封印

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;}

0 0

慕莱坞森

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

0 0

慕雪6442864

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

0 0