React多输入框共用onChange handler时仅能获取输入首字母如何解决

问题原因 #

你代码的核心错误出在handleOnChange方法里的赋值语法：

[event.target.name] = event.target.value;

• 这行是JavaScript的数组解构赋值语法，当右侧是字符串类型的输入值时，JS会自动将字符串拆分为字符数组，只会把第一个字符赋值给左侧的变量，这就是你只能拿到第一个输入字符的原因。
• 同时这个赋值操作只是创建了一个和event.target.name同名的局部变量，根本没有修改类实例上的this.name/this.email/this.phone属性，后续提交数据时也拿不到最新的输入值。

修复方案 #

把handleOnChange方法里的赋值语句修改为对象属性动态访问语法即可：

handleOnChange(event) {
    this[event.target.name] = event.target.value;
    // 原有调试日志代码可保留
    console.log(event)
    console.log(event.target.name);
    console.log(event.target.value);
}

优化建议 #

更符合React开发规范的做法是把表单值存在组件的state中，而不是直接挂在类实例上，修改后代码如下：

1. 调整constructor初始化state

constructor(props) {
    super(props);
    this.state = {
        name: "",
        email: "",
        phone: ""
    };
}

2. 修改handleOnChange更新state

handleOnChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    });
}

3. 调整提交时的取值逻辑

addContact() {
    console.log("add");
    this.props.addContactHandler(this.state);
}

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