React中state内部对象的setState不生效问题求助

我帮你排查下这个表单state无法更新的问题，看下来主要有两个核心问题需要修正：

• 事件绑定位置错误：你把onChange事件绑定在了<form>标签上，但React表单的输入控件（比如input）才是需要绑定onChange的对象。form的onChange触发逻辑和input的完全不同，这么做会导致你的handleChange函数无法正确捕获输入框的内容变化。
• input缺失name属性：从你贴的代码片段能看到input的name属性没写完（n...），而你的handleChange函数是依赖event.target.name来对应state中的键名的。如果没有给input设置name="username"，setState时就找不到对应的state属性，自然不会生效。

修正后的完整代码 #

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: 'Bla' };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <form>
          <label> 
            Name: 
            <input 
              type="text" 
              value={this.state.username} 
              name="username"  {/* 补上与state键名一致的name属性 */}
              onChange={this.handleChange}  {/* 将onChange绑定到input上 */}
            />
          </label>
        </form>
        {/* 新增预览区域，方便验证state是否更新 */}
        <p>当前输入值: {this.state.username}</p>
      </div>
    )
  }
}

修改后，当你在输入框输入内容时，handleChange会正确获取到input的name和value，从而精准更新state.username，你可以通过下方的预览文本实时确认state的变化情况。

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