清除 React 表单的正确方法是什么？

Question

我有一个表单，其中包含一些使用 Reactjs 创建的不同类型的元素（文本框、复选框等）。我一直很难弄清楚如何清除表格。我用谷歌搜索并不确定这些解决方案。我尝试了类似以下的方法，但发现它没有用。

我想要发生的是，如果用户填写表格并决定清除表格，一旦他们点击“清除表格”，表格应该重置。所有字段都需要再次为空。

  handleClearForm(){
    this.setState({
      decisionDate: '',
      Veggies:'',
      fullName:'',
      comment:''
    }) 
  }

如何在 react 中清除表单？任何帮助将不胜感激。

Code

Answer 1

检查这个改进的代码

 class App extends React.Component{
  constructor(){
    super()
    this.state = {
      decisionDate: '',
      Veggies:'',
      fullName:'',
      comment:''
    }
  }
  
    
    setdecisionDateValue (value) {
      this.setState({
        decisionDate: value
      })
    }
  
  componentDidMount(){
    $( "#decisionDate" ).datepicker({
      onSelect: this.setdecisionDateValue
    });
  }
  
  handleClearForm = () => {
    this.setState({
      decisionDate: '',
      Veggies:'',
      fullName:'',
      comment:''
    }) 
  }
  
  handleChange = (e) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    
    this.setState({[name]: value})
  }
  
  render(){
    const { decisionDate,Veggies,fullName,comment} = this.state;
    return(
     <div>
        <input type="text" name="fullName" 
        placeholder="Full Name" 
        onChange={this.handleChange} 
        value={fullName}/><br /><br />
        <input type="text" 
         name="decisionDate" 
         id="decisionDate"
         onChange={this.handleChange} 
         placeholder="MM/DD/YYYY" 
         value={this.state.decisionDate} /><br /><br />
        <textarea name="comment" 
         value={comment} 
         onChange={this.handleChange}/><br /><br />
        <input 
          type="checkbox"
          name="Veggies"
          onChange={this.handleChange} 
          checked={Veggies}
          />Veggies<br /><br />
        <button onClick={this.handleClearForm}>
         Clear Form
        </button>
      </div>
    )
  }
}

ReactDOM.render(
 <App />,
  document.getElementById("root")
)