javascript - 如何更改状态以响应表单

Question

我有一个应该更新初始状态的表单，我遵循了许多教程，我的代码看起来与它们相同，但由于某种原因它不会更新状态。

import React, { Component } from 'react';

class Create extends Component{
   constructor(props){
      super(props);

      this.state = {
         title: "",
         body: "",
         error: ""
      } 
   }

   onTitleChange(e) {
      const title = e.target.value;
      this.setState({title})
   }

   onBodyChange(e) {
      const body = e.target.value;
      this.setState({body})
   }

   onSubmit(e) {
      e.preventDefault();

      if(!this.state.title || !this.state.body){
         this.setState(() => ({ error: "Please fill in all gaps"}))
      } else {
         this.setState(() => ({ error: "" }))
         // Send info to the main page
         alert(this.state.title);
      }
   }

   render(){
      return(
         <div>
         {this.state.error && <p>{this.state.error}</p>}
         <form onSubmit = {this.onSubmit}>
         <label>Put a title for your note</label>
         <input 
            placeholder="Title"
            type="text"
            value={this.state.title}
            autoFocus
            onChange= {this.onTitleChange}
         />
         <label>Write your note</label>
         <textarea 
            placeholder="Note"
            value={this.state.body}
            autoFocus
            onChange = {this.onBodyChange}
         />
         <input type="submit" value="Submit"/>
         </form>
         </div>
      );
   }
}

export default Create;

当我在 React 开发人员工具中检查当前状态时，它显示状态保持不变，我不知道为什么，因为日志中没有错误。我正在使用 webpack、babel 和 react。

///////////////// 已编辑 /////////////////

我按照你们给我的建议编辑了我的代码，但它仍然不起作用。提交表单时应该会出现一个警报，但也不会被触发，所以我相信没有任何函数被触发。

这是我编辑的代码：

import React, { Component } from 'react';

class Create extends Component{
   constructor(props){
      super(props);
      this.onTitleChange = this.onTitleChange.bind(this);
      this.onBodyChange = this.onBodyChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);

      this.state = {
         title: "",
         body: "",
         error: ""
      } 
   }

   onTitleChange(e) {
      const title = e.target.value;
      this.setState((prevState) => {
         return {
           ...prevState,
           title
         };
       });
   }

   onBodyChange(e) {
      const body = e.target.value;
      this.setState((prevState) => {
         return {
           ...prevState,
           body
         };
       });
   }

   onSubmit(e) {
      e.preventDefault();

      if(!this.state.title || !this.state.body){
         this.setState((prevState) => {
            return {
              ...prevState,
              error: "Please fill in all gaps"
            };
          });
      } else {
         this.setState((prevState) => {
            return {
              ...prevState,
              error: ""
            };
          });
         // Send info to the main page
         alert(this.state.title);
      }
   }

   render(){
      return(
         <div>
         {this.state.error && <p>{this.state.error}</p>}
         <form onSubmit = {this.onSubmit}>
         <label>Put a title for your note</label>
         <input 
            placeholder="Title"
            type="text"
            value={this.state.title}
            autoFocus
            onChange= {this.onTitleChange}
         />
         <label>Write your note</label>
         <textarea 
            placeholder="Note"
            value={this.state.body}
            autoFocus
            onChange = {this.onBodyChange}
         />
         <input type="submit" value="Submit"/>
         </form>
         </div>
      );
   }
}

export default Create;

标签： javascriptreactjsformsstate

Answer 1

ReactsetState()接受一个对象，而不是一个函数。所以把你改成onSubmit()这样：

if(!this.state.title || !this.state.body){
    this.setState({ error: "Please fill in all gaps"})
} else {
    this.setState({ error: "" })
    // Send info to the main page
    alert(this.state.title);
}