帶有React組件的表單

Question

我想用React創建表單。我想出了以下內容：

export class Welcome extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      errors: [] 
     }; 
    } 

    render() { 
     return (
      <form className="Welcome"> 
       <div className="hello">{ this.props.sayHello() } I'm <Link to="/life">Marco</Link>! Welcome to my hood.</div> 
       <div className="question-box"> 
        <div className="question"><span className="underline" >How much time do you have?</span></div> 
        <input className="minutes" type="text" value={this.props.minutes} 
          onChange={ (e) => this.props.updatePreferences("minutes", e.target.value) }/> minutes. 
       </div> 
       <div className="question-box"> 
        <div className="question"><span className="underline">What do you fancy?</span></div> 
        <div className="answer"> 
         <span className="choice"> 
          <input type="checkbox" id="business" defaultChecked={ this.props.interests.business }/> 
          <label htmlFor="business">Business</label> 
         </span> 
         <span className="choice"> 
          <input type="checkbox" id="code" defaultChecked={ this.props.interests.code }/> 
          <label htmlFor="code">Code</label> 
         </span> 
         <span className="choice"> 
          <input type="checkbox" id="design" defaultChecked={ this.props.interests.design } /> 
          <label htmlFor="design">Design</label> 
         </span> 
        </div>{/* end of .answer*/} 
        </div>{/* end .question-box*/} 
       <button>Show me magic</button> 
       <div className="errors"> 
        No error. All good. 
       </div> 
      </form> 
     ); 
    } 
} 

onChange函數在父組件中，它也包含狀態。但每次他們被稱爲整個組件重新加載。整個表單應該放在一個單獨的組件上，還是應該爲每個輸入創建單獨的組件？

Answer 1

響應狀態變化，響應調用渲染函數。所以如果組件沒有收到狀態改變事件，它很可能不會被重新排列，但不一定。無論如何，它可能會重演。 ref