入力フィールドの値を変更する - 反応

Question

MaterialUIライブラリのSelectFieldからのアイテムを選択した後に入力フィールドの値を変更しようとしましたが、まだ成功しませんでしたが、その上に、私が書いたものはすべて、それがあると思われるもののように見えます。

これは私が値を変更するために使用するものです。

var element = ReactDOM.findDOMNode(this.refs._deviceId); 
    element.setAttribute('value', 'deneme'); 
    console.log(element); 

これは入力フィールドです。

   <div className="form-group row"> 
       <label className="col-md-2 control-label">Device ID</label> 
       <div className="col-md-10"> 
        <input type="text" className="form-control" id="deviceId" placeholder="Device ID" ref="_deviceId" /> 
       </div> 
       </div> 

そして、私は項目を選択した後、私はすべてをチェックするために、要素変数を慰めは大丈夫です、問題はありませんようです。

ここにコンソールログがあります。

ご覧のとおり、値が正常に配置されますが、画面上には、何も入力フィールドに起こりません。

Answer 1

value属性を設定した後、コンポーネントを再レンダリングする必要があります。 Reactは、コンポーネントが状態変化を検出したときにコンポーネントを再レンダリングするだけです。だから、むしろ再レンダリング、そのコンポーネントは場所を取ることができるように状態を変更するSETSTATEメソッドを使用してください状態variable-

//Declare the state variable 

this.state = { 
    inputValue: '' 
}; 

//Use a lifecycle event or your own method to change the value of that state by using the setState method as- 

someMethod() { 
    this.setState({ 
     inputValue: 'deneme' 
    }); 
} 

//In HTML use the above state as- 
<input type="text" className="form-control" id="deviceId" placeholder="Device ID" ref="_deviceId" value={this.state.inputValue} /> 

を使用しています。

OR

あなたは強制的にコンポーネントを再描画するためにthis.forceUpdate()を呼び出すことができます。