如何在React.js中处理同表单内不同输入字段的变更

我有一个包含name和mark两个输入字段的表单，希望根据变更的字段来更新对应属性，而非为每个字段单独编写处理函数（后续字段会增加）。当前代码仅能更新name属性，代码如下：

handleStudentChange(e) {
    console.log(e.target)
    var value = e.target.value
    console.log("value: ", value)
    var field = e.target
    //e.target returns <input id="mark1" class="form-control" type="number" placeholder="Mark 1" value="40">

    this.setState({
        activeStudent: {
            ...this.state.activeStudent,
            name: value
        }
    })
}

可通过e.target.id获取目标属性名（如name或mark1），请问能否将field作为属性名实现field:value的赋值，或有更优实现方案？

核心实现：ES6计算属性名 #

完全可以实现动态属性赋值，利用ES6的计算属性名语法，就能把输入框的id作为状态属性键，实现通用的字段更新逻辑，修改后的代码如下：

handleStudentChange(e) {
    const { id, value } = e.target;
    this.setState({
        activeStudent: {
            ...this.state.activeStudent,
            [id]: value
        }
    });
}

• 通过解构赋值直接从e.target取出id（对应状态属性名）和value（输入值），简化代码
• [id]语法会把变量id的值作为对象的属性键，实现当前输入字段与状态属性的动态绑定，后续新增字段只需给输入框设置对应id即可，无需修改处理函数

更优方案：函数式状态更新 #

如果状态更新依赖于之前的状态快照，推荐使用函数式setState，这能确保你拿到的是最新的状态，避免React异步更新机制导致的状态不一致问题，尤其在多字段频繁更新场景下更可靠：

handleStudentChange(e) {
    const { id, value } = e.target;
    this.setState(prevState => ({
        activeStudent: {
            ...prevState.activeStudent,
            [id]: value
        }
    }));
}

额外优化：处理数值类型字段 #

注意到你的mark字段是type="number"，但e.target.value默认返回字符串，若需要保持数值类型，可添加类型转换逻辑：

handleStudentChange(e) {
    const { id, value, type } = e.target;
    // 数字类型字段转为Number，空值设为0避免NaN
    const processedValue = type === 'number' ? Number(value) || 0 : value;
    this.setState(prevState => ({
        activeStudent: {
            ...prevState.activeStudent,
            [id]: processedValue
        }
    }));
}

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