反応します。 onChangeのためにrefを取り除くことはできますか？

Question

スペック反応するようによると： https://reactjs.org/docs/refs-and-the-dom.html 「レフリーのためのいくつかの良いユースケースがあります。 は、フォーカス、テキスト選択、またはメディア再生の管理を 不可欠アニメーションをトリガ サードパーティのDOMライブラリとの統合使っ 避けてください。宣言的に行うことができるものについては、を参照してください。私は今のところないと確信している、なぜ私がこのような場合には、適切かどうか、REFを使用したかどうか、だ

：

export let FormInput = createReactClass({ 
    handleInput(e){ 
     e.preventDefault(); 
     const product = this.name.value; 
     const red = this.red.checked; 
     this.props.addProduct(product,red); 
     this.inputForm.reset(); 
    }, 
    render(){ 
     return(
      <form className="prod_input" ref={x => this.inputForm = x} onSubmit={this.handleInput}> 
       <input type="text" ref={x => this.name = x} placeholder="Product name"/> 
       <input type="checkbox" ref={x => this.red = x} value="true"/> 
       <input type="submit" hidden/> 
      </form> 
      ) 
    } 
}) 

ない場合は、のonChange = {へのREFを交換するために再配置することができる方法}？

Answer 1

入力フィールドを制御することで、参照の使用を避けることができます。ここに例があります：

あなたのフィールドの値をローカル状態に保つことです。次に、各フィールドの値を現在状態に格納されている値に設定し、ユーザーが何かを入力するたびにこの値を更新するonChangeハンドラをアタッチします。フォームを送信すると、すべての値がコンポーネントの状態で直接利用できます。