使用 onInput() 在选择元素中获取所选 html 选项的值

【问题标题】：Getting value of chosen html option in select element using onInput()使用 onInput() 在选择元素中获取所选 html 选项的值
【发布时间】：2020-11-02 04:01:28
【问题描述】：

我想在选择select 元素中的option 时触发一个事件。我曾尝试使用onChange()，但它会在从选择器中取消焦点时触发事件。使用onInput() 会在正确的时间触发事件，但是我无法访问所选选项的值。

这是我使用 onChange 的代码。

onSelectChange(e: React.ChangeEvent<HTMLSelectElement>) {
    this.setState({ selected: e.target.value  });
}

[...]

<select onChange={e => this.onSelectChange(e)}>

更改为onInput（和e:React.FormEvent<HTMLSelectElement>) 后，我在编写e.target.value 时出错。

【问题讨论】：

标签： javascript html reactjs html-select onchange

【解决方案1】：

onChange 应该可以工作；参见 sn-p 进行比较/示例：

class Example extends React.Component {
  state={
    selected: '',
  }
  
  handleChange = e => {
    console.log("setting selected to " + e.target.value);
    this.setState({selected: e.target.value});
  }
  
  render() {
    return(
      <select value={this.state.selected} onChange={this.handleChange}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
    )
  }
}


ReactDOM.render(<Example/>, document.getElementById("root"));

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

【讨论】：