React中如何从事件对象获取值？表单onChange绑定警告怎么解决？

你收到的警告本质是onChange绑定的handleChange函数运行时抛出异常，React认为你没有提供有效的onChange处理逻辑，因此触发了只读字段的警告。

具体错误点 #

• 拼写错误：事件对象属性currentTarget被误写为currrentTarget（多了1个字母r），读取该属性时报错导致函数中断，setState没有执行
• 多余的对象展开操作：this.state.username为字符串类型，不需要用{...this.state.username}做对象克隆，该操作属于无效逻辑
• 可选优化点：label标签使用了原生class属性，React规范中需使用className属性，避免额外警告

修正后的代码 #

1. 修正handleChange函数 #

handleChange = e => {
  this.setState({
    username: e.currentTarget.value
  })
}

2. 确认state初始化正确 #

检查组件的state初始化逻辑，确保username初始值为空字符串，避免出现非受控组件转受控组件的警告：

constructor(props) {
  super(props);
  this.state = {
    username: ''
  }
}

3. 修正label属性（可选） #

<label htmlFor="exampleInputEmail1" className="form-label">Email address</label>

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