通用事件處理程序設置任何表單字段的狀態

Question

在這裏，我們必須編寫三個函數來改變形式的所有輸入字段的狀態，並且如果我們有更多的字段，例如電話和地址，我們必須編寫兩個更多的函數改變這些領域的狀態，我想問有沒有什麼辦法可以只寫一個泛型函數來改變這個表單的任何字段的狀態，而不是爲每個表單字段編寫單獨的函數？

class SignUpForm extends React.Component { 
     constructor() { 
      super(); 
      this.state = { 
       name: '', 
       email: '', 
       password: '', 

      }; 
     } 

     handleNameChange = (evt) => { 
      this.setState({name: evt.target.value}); 
     } 

     handleEmailChange = (evt) => { 
      this.setState({email: evt.target.value}); 
     } 

     handlePasswordChange = (evt) => { 
      this.setState({password: evt.target.value}); 
     } 
     render(){ 
      return(
       <form onSubmit={this.handleSubmit}> 
        <input 
         type="text" 
         placeholder="Enter Name" 
         value={this.state.name} 
         onChange={this.handleNameChange} 
        /> 
        <input 
         type="text" 
         placeholder="Enter email" 
         value={this.state.email} 
         onChange={this.handleEmailChange} 
        /> 
        <input 
         type="password" 
         placeholder="Enter password" 
         value={this.state.password} 
         onChange={this.handlePasswordChange} 
        /> 
        <button disabled={isDisabled}>Sign up</button> 
       </form> 
      ) 
     } 

    } 

Answer 1

您可以使用以下模式：

handleChange = (type, event) => { 
    this.setState({[type]: event.target.value}); 
} 

您使用handleChange這樣的：

<input 
    type="text" 
    placeholder="Enter Name" 
    value={this.state.name} 
    onChange={(event) => this.handleChange('name', event)} 
/>