如何从React中的复合组件访问html组件？

Question

考虑这个组成部分

var React = require("react");

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

module.exports = 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;

我想访问第一个组件的<input />的value属性。 我了解在为ref属性提供的回调函数中，只有组件构造函数可用。

那么，有什么方法可以访问第二个组件中的html组件？

如果这个问题是重复的，我深表歉意，我是新来的反应者，并不熟悉该术语。

Answer 1

您可以使用裁判

<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