反応のコンポジットコンポーネントからhtmlコンポーネントにアクセスする方法は？

Question

は、これは私が最初のコンポーネントの<input />の値プロパティにアクセスする最初のコンポーネント

var React = require('react'); 
var Button = require('./Button.react'); 
var Input = require('./Input.react'); 

var Form = React.createClass({ 
    render:function(){ 
    return(<div> 
     <Input ref = {(input) => this._user=input} placeholder='Username'/> 
     <Input ref = {(input) => this._pass=input} type="password" placeholder='Password'/> 
     <Button onClick={this.onPress}>Login</Button> 
    </div>) 
    }, 
    onPress:function(){ 
    console.log(this._user.value); 
    } 
}); 

module.exports = Form; 

を使用して別のコンポーネントである

var React = require("react"); 

var Input = React.createClass({ 
    render:function(){ 
    return (<input {...this.props}/>) 
    } 
}) 

module.exports = Input; 

このコンポーネントを考えてみましょう。 ref属性に提供されたコールバック関数ではコンポーネントコンストラクタしか利用できないことを理解しています。

したがって、2番目のコンポーネント内のhtmlコンポーネントにアクセスする方法はありますか？

この質問が重複している場合はお詫び申し上げます。私はこの用語に慣れておらず、新しいことをお伝えしています。

Answer 1

あなたはrefs

<Input ref = {(input) => this._pass=input} type="password" placeholder='Password'/> 

、その後

this._pass.yourValueFunction() 

---

を使用することができますしかし、私は、これはあなたが何をしたいのかではないと思います。 <Input />から値を取得しようとしていますが、その値は親の値を設定している<Input />のonChangeコールバックで行う必要があります。

のような何か...

var Input = React.createClass({ 
    render() { 
    return <input {...this.props} onChange={this.props.handleChange} /> 
    } 
}) 

とあなたの親にあなたはhandleChangeコールバックを定義する必要があり、たとえば

handleChange(e) { 
    this.setState({ inputValue: e.target.value }) 
    // or possibly this.inputValue = inputValue 
} 

とその後<Input />

<Input handleChange={handleChange} ... /> 

にそれを渡すために<Input />の値は常にアクセス可能です：this.state.inputValue