9

私は最近、react.js の学習を開始し (大好きです!)、入力値の処理に関する興味深いシナリオに出くわしました。

Egghead チュートリアルでは、次のrefようなものを使用して入力を更新しました。

handleSubmit(){
    var newNote = this.refs.note.value;
    this.refs.note.value = '';
    this.props.addNote(newNote);
}

<input type="text"  ref="note" />
<button type="button" onClick={this.handleSubmit.bind(this)}> 
  Submit 
</button>

後で、マテリアル uiライブラリ (これも素晴らしい) をいじっていたところref、 .. Google でしばらくした後、 the を使用して、次のように関数stateを使用して更新できることがわかりました。onChange

handleNoteChange(e){
    this.setState({newNote: e.target.value});
}

<TextField 
    type="text" 
    value={this.state.newNote} 
    onChange={this.handleNoteChange.bind(this)} />

を使用するref方が簡単なように思えますが、最近反応ネイティブを学んでいると、onChange関数とstate変数を使用して行うすべてのことが2番目の方法のようです。

だから私の質問は、先に進むために、どちらかを使用する方が良いでしょうか? たぶんstate、ネイティブでの使用をより良くする制限がありますか?

4

2 に答える 2

13

React では、参照を使用して DOM を操作することは避けてください。次のようなことは絶対にしないでください。

this.refs.note.value = '';

必要に応じて (通常はユーザー入力への応答として) DOM から読み取ることは問題ありませんが、アプリケーションから DOM に情報を渡す唯一の方法は、render()メソッドを使用することです。そうしないと、DOM がアプリケーションと同期しなくなります。React では、「信頼できる情報源」は DOM ではなくメモリに存在します。

あなたが提供する2番目の例は、標準のReactの方法です。メソッドによって定義されたビューrender()は、最終的に と から派生しpropsますstate。状態を変更すると、ビューが変更されます。したがって、呼び出すthis.setState()と、コンポーネントが強制的に再レン​​ダリングされます。

于 2015-12-13T02:16:31.787 に答える
0

反応に関する Pluralsight チュートリアルを実行しているときに、同じ状況に遭遇しました。私の経験を共有し、別の例も追加すると思いました。チュートリアルでは、ref 値を介して入力の値を変更しました。

ReactDOM.findDOMNode(...)

ref を使用するとコードが短縮されますが、代わりに入力値が直接変更されるか、コンポーネントの状態に依存します。

var Form = React.createClass({
  onSubmit: function(e){
    e.preventDefault();
    var loginInput = ReactDOM.findDOMNode(this.refs.login);
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  },
  render: function(){
    return (<form onSubmit={this.onSubmit}>
      <input placeholder="login" ref="login"/>
      <button>Add</button>
    </form>);
  }
});

状態を介して入力値にアクセスして変更するようにコードを変更しました。

var Form = React.createClass({
  getInitialState: function(){
    return {inputLogin: ''}
  },
  onKeyUpHandler: function(e){
    this.setState({inputLogin: e.target.value})
  },
  onSubmit: function(e){
    e.preventDefault();
    this.props.addCard(this.state.inputLogin);
    this.setState({inputLogin: ''})
  },
  render: function(){
    return (<form onSubmit={this.onSubmit}>
      <input placeholder="login" onKeyUp={this.onKeyUpHandler}/>
      <button>Add</button>
    </form>);
  }
});

もう少し冗長ですが、使用状態が適切になりました。

于 2016-01-31T13:47:53.677 に答える