React中通过Props将<option>的值传递给onChange函数

算力阿峰

2026-6-19

问题描述

我尝试从<select>标签的onChange事件中调用一个函数，代码如下：

<select id="select-option" onChange = {() => this.props.onPressed(this.value)}>
     <option value="standard">Standard: 7 day</option>
     <option value="rush">Rush: 3 days</option>
     <option value="express">Express: next day</option>
     <option value="overnight">Overnight</option>
</select>

我希望将<option>的值传递给onPressed()函数，请问该如何实现？

解决方案

你当前代码里的this.value无法正确获取选中值，因为这里的this指向的是当前箭头函数的上下文，而非<select>元素本身。以下两种常用方法可以解决：

方法一：通过事件对象获取选中值

onChange事件会默认接收一个事件参数e，通过e.target.value就能直接拿到选中的<option>的值，这是React处理表单元素的常规方式：

<select id="select-option" onChange={(e) => this.props.onPressed(e.target.value)}>
     <option value="standard">Standard: 7 day</option>
     <option value="rush">Rush: 3 days</option>
     <option value="express">Express: next day</option>
     <option value="overnight">Overnight</option>
</select>

方法二：使用ref获取DOM元素的值（适用于复杂场景）

如果需要直接操作<select>DOM元素，可以给它添加ref，再在事件函数中读取值：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.selectRef = React.createRef();
  }

  handleSelectChange = () => {
    const selectedValue = this.selectRef.current.value;
    this.props.onPressed(selectedValue);
  }

  render() {
    return (
      <select id="select-option" ref={this.selectRef} onChange={this.handleSelectChange}>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
      </select>
    );
  }
}

优先推荐方法一，代码更简洁且符合React的事件处理逻辑，无需直接操作DOM。