setState 不适用于 ReactJs 中 this.state 内的对象答案

【问题标题】：setState not working for objects inside the this.state in ReactJssetState 不适用于 ReactJs 中 this.state 内的对象
【发布时间】：2018-03-17 13:01:16
【问题描述】：

我正在使用 React 中的表单并面临这个奇怪的问题。

这就是我的组件类的外观 -

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 onChange={this.handleChange}>
              <label> Name: <input type="text" value={this.state.username} name="username" /> </label>
              <input type="submit" value="Submit" />
            </form>
         </div>
      );
   }
}

这就是渲染页面在浏览器中的外观。

我可以更新/更改文本框中的文本。

现在我稍微调整一下我的组件类，基本上我更改了this.state 对象并相应地更新了 HTML 输入元素。

这些是完成的更改-

this.state = {
   formEle: {
      username: 'Bla'
   }
};

&lt;label&gt; Name: &lt;input type="text" value={this.state.formEle.username} name="username" /&gt; &lt;/label&gt;

当我在浏览器中呈现页面时进行这两项更改后，一切都相同，除了我无法更新/更改文本框中的内容。

我的预感是this.setState 函数一定有问题，但是当我打印event.target.name 和event.target.value 的值时，我得到了预期值。不知道到底出了什么问题。

【问题讨论】：

标签： javascript reactjs setstate react-component

【解决方案1】：

您无法再更新输入框的原因是您不再设置正确的状态变量。

如果您将 handleChange 事件侦听器更改为如下所示，则应该会再次开始工作：

handleChange(event) {
  this.setState({ 
    formEle: {
      ...this.state.formEle,
      [event.target.name]: event.target.value,
    },
  });
}

您指定要从 this.state.formEle.username 读取状态，因此您需要确保设置状态树的特定部分。

希望这对您有所帮助 - 祝您编码愉快！

【讨论】：