Question

所以，我有一个包含多个输入的表单来更新状态onChange。

我想要发生的事情是让用户更改值，当用户更改时，请更新表单state以保存这些更改。我的代码使用ES6类：

super(props);
 this.state = {
   post: this.props.content // this is an object {title: '', description: ''}
 }

 // I have all the methods below this.method = this.method.bind(this) up here.
}

handleTitle(title) { // gets title from input onChange event
  let post = update(this.state.post, {title: {$set: title}}); // using import update from 'immutability-helper' for changing object
  this.setState({ post });
  this.checkPostApproval();
} // this all works, post is updated. I have the same code for description.

checkPostApproval() {
  // here I want to check the post values and make sure they are valid.
  // and either allow or deny submission. 
  if (this.state.post['title'] && this.state.post['description']) {
    this.setState({isApproved: true});
  } else {
    this.setState({isApproved: false});
  }
}

问题：

当用户设置标题然后设置描述时，isApproved切换为true（我想要的）。但是，如果用户随后将标题更改为＆＃34;＆＃34;，则批准仍然为真（不是我想要的）。如果用户然后开始键入描述（批准切换为false）。我认为这与组件生命周期和状态设置有关，但我不确定。

我不介意使用jQuery检查验证，但我希望在输入更改后检查值，然后使用方法和道具更新帖子。

更新状态中的对象然后使用各种输入字段中的onChange事件处理程序对其进行验证的最佳实践方法是什么？

最终，如果有任何无效的输入，我希望isApproved为假。

Answer 1

请在setState回调中运行后批准测试（第二个参数）。正如您已经注意到的那样 - setState方法是异步的，组件状态不会立即更新。

this.setState({post}, this.checkPostApproval)

请参阅React's documentation about setState中的此说明：

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。相反，使用componentDidUpdate或setState回调（setState（更新程序，回调）），其中任何一个都保证在应用更新后触发。如果需要根据以前的状态设置状态，请阅读下面的updater参数。

ReactJS：检查状态值并根据状态更新渲染的最佳方法？

1 个答案: