清除 React Form 的正確方法是什么？

Question

我有一個表單，其中包含一些使用 Reactjs 創建的不同類型的元素（文本框、復選框等）。我一直很難弄清楚如何清除表單。 我在谷歌上搜索過，但不太確定這些解決方案。 我嘗試了類似下面的東西，但發現它沒有用。

我想要發生的是，如果用戶填寫表格並決定清除表格，一旦他們點擊“清除表格”，表格應該重置。 所有字段都需要再次留空。

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

如何清除反應中的表格？ 任何幫助將非常感激。

代碼

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")
)