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