親からの複数の反応成分を結合する

Question

私はちょうどReactで始まって何かについて混乱しています。ログインコントローラービュー（スマートコンポーネント）とLoginFormビュー（ダムコンポーネント）があり、LoginForm内でこのページのすべての入力を処理するカスタムコンポーネントを作成したとしましょう。

class TextInput extends React.Component { 
    render() { 
    return (
     <input type="text" 
      name={this.props.name} 
      className="form-control" 
      placeholder={this.props.placeholder} 
      ref={this.props.name} 
      onChange={this.props.onChange} 
      value={this.props.value} /> 
    ); 
    } 
} 

class LoginForm extends React.Component { 
    render() { 
    return (
     <TextInput 
     name="username" 
     placeholder="Username" 
     onChange={this.props.onChange} 
     value={this.props.username} /> 
     <TextInput 
     name="address" 
     placeholder="Address" 
     onChange={this.props.onChange} 
     value={this.props.address} /> 
    ); 
    } 
} 

私はその後、私はあなたが異なるが、異なる入力のために呼ばれるように取得するにはどうすればよい

を作成するときの私のトップレベルのログインコントローラのビューの機能をレンダリングするかどうかはわかりませんか？私のトップレベルのコンポーネントはプロパティを正しく設定しているので、一番下のコンポーネントはonChangeプロパティを期待しているので、onChangeを渡すときにトップレベルから、2つの別々のメソッドの代わりに同じonChangeメソッドを呼び出すすべてのTextInputsがありますか？

Answer 1

はい、同じ関数が呼び出されます。どのような変更がパラメータです。これはちょうど古い学校JSです。 inputは、変更イベントを最初のパラメータとしてonChange関数に渡します。

これは、1つのコンポーネントで処理する必要があります。 refsへ

onChange(e){ 
    var formKeyVal = {}; 
    formKeyVal[e.target.name] = e.target.value; 
    this.setState(formKeyVal); 
} 

Answer 2

おかげで私たちは、それぞれの低レベルの要素を参照するまで異なって設定することができます。問題なく、愚かでスマートです。 あなたの高レベルのコンポーネントが含まれています

`handleText(){ 
      this.setState({ 
       text: ReactDOM.findDOMNode(this.refs.yourElement).value 
      }) 
     }` 

あなたの低レベルのコンポーネントが含まれています <input type="text" ref="yourElement" onChange={this.props.textInput} />

この例ではあなたにいくつかの手がかりを与えます。詳細に注意してください：セレクタ：refs しかし要素：ref。 時々あなたは2つのレベルrefsが必要です。この場合は、 text: ReactDOM.findDOMNode(this.refs.yourComponent.refs.yourElement).value