如何在JavaScript中传递<select>下拉框onChange事件的选中值

问题原因 #

• 你当前代码的onChange绑定逻辑完全错误：onChange={setShippingMethod(this)}是渲染时直接执行函数，而非把函数作为回调传递给change事件，你传入的this是当前组件实例，自带循环引用结构，所以JSON.stringify时直接抛出循环对象错误
• 未正确绑定setShippingMethod的this指向，也没有正确接收change事件对象
• 直接修改this.state不符合React状态更新规范，会导致视图不触发重渲染
• select的value属性逻辑写反，会导致选中值无法正确回显

修复方案 #

第一步：修正事件绑定和回调逻辑 #

两种常用实现方式选其一即可：

方案1：箭头函数绑定（无需额外处理this指向）

首先修改setShippingMethod的定义，改成类属性箭头函数，自动绑定当前组件的this：

setShippingMethod = (e) => {
    // e是原生事件对象，选中值存在e.target.value里
    const selectedValue = e.target.value;
    console.log('Shipping method ' + selectedValue);
    // 不能直接修改this.state，必须用setState触发状态更新
    this.setState({
        defaultMethod: selectedValue
    });
    this.props.setShippingMethod(selectedValue);
}

然后修改select的onChange和value属性：

<select 
    id="comboMethod" 
    onChange={this.setShippingMethod} 
    value={defaultMethod ? defaultMethod.trim() : ''}
>
    {shippingMethods.map(method => { 
        const val = method.shipmthd.trim();
        return <option key={val} value={val}>{val}</option>
    })}
</select>

方案2：构造函数绑定（兼容性更好）

如果你的项目不支持类属性箭头函数，就在类的构造函数里手动绑定this：

constructor(props) {
    super(props);
    this.state = {
        // 保留你原有state定义
        shippingMethods: [],
        defaultMethod: ''
    };
    // 手动绑定this指向
    this.setShippingMethod = this.setShippingMethod.bind(this);
}

// 原有方法定义不变，参数改为事件对象
setShippingMethod(e) {
    const selectedValue = e.target.value;
    console.log('Shipping method ' + selectedValue);
    this.setState({
        defaultMethod: selectedValue
    });
    this.props.setShippingMethod(selectedValue);
}

select部分的代码和方案1完全一致。

额外注意点 #

• 不要直接给select的value传null，空值场景传空字符串即可，避免React在受控/非受控组件之间切换报警告
• 所有state修改必须通过this.setState执行，直接修改this.state属于无效操作，React不会监听这部分变更

内容的提问来源于stack exchange，提问作者Randy