setStateを使わずにチェックボックスの値を変更するが、REACTのref属性を使用する

Question

refを使用して入力要素を選択し、最後にチェックされた各値をfalse（チェックを外す）にリセットします。私はsetStateを使用するべきですが、私の場合はそのように動作している必要があります。そうする際に深刻な欠点がありますか？

insertRow(event){ 
    ..... 
    let op,t,res=''; 

    for(let i=1;i<4;i++){ 
    op="op"+i; 
    t=this.refs[op]; 
    res+=t.checked?t.value:''; 
    t.checked=false; 
    } 
    ..... 
} 

render(){ 
    return(
    <div>... 
     <input key="1" ref="op1" type="checkbox" value="a"/>a) Dietary Restrictions<br/> 
     <input key="2" ref="op2" type="checkbox" value="b"/>b) Physical Disabilities<br/> 
     <input key="3" ref="op3" type="checkbox" value="c"/>c) Medical Needs<br/> 
    </div> 
); 
} 

Answer 1

私は、REFを使用した入力要素を選択し、最終的には（チェックを外す）falseに各点検値をリセットしています。私たちはsetStateを使用していなければなりませんが、私の場合は必要に応じて動作します。そうすることで深刻な欠点はありますか？

実装についていくつかご説明します。

1. Refsは可能な限り控えめに使用する必要があります。 を宣言的にと扱うことができるものはの状態を使用してFacebookの推奨するコメントにする必要があります。

あなたの最初の傾きは、あなたのアプリに「物事が起こるよう」へのREFを使用することがあります...以下を参照してください。これが当てはまる場合は、コンポーネント階層内での状態の所在を批判的に考えてください。しばしば、その状態を「所有する」適切な場所が階層内でより高いレベルにあることが明らかになります。この例については、「リフティングステートアップ」ガイドを参照してください。

2. リファレンスにアクセスすることは推奨されていません。次のようにそうすることの現在の方法は次のとおりです。

<input type="text" ref={(input) => { this.textInput = input; }} />

あなたは次の呼び出しを経由して、このアクセスこのREFをすることができます：ここで

this.textInput.someMethodOrProperty;

---

は最高のを提供するリンクです慣行に関する慣行Refs and the DOM。