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

考虑一下这个组件

var React = require("react");

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

module.exports = Input;

var React=require（“React”）；
var输入=React.createClass({
render:function（）{
返回（）
}
})
module.exports=输入；

这是使用第一个组件的另一个组件

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-Button=require（“./Button.react”）；
var Input=require（'./Input.react'）；
var Form=React.createClass({
render:function（）{
报税表（
这是.\u user=input}占位符='Username'/>
这个.\u pass=input}type=“password”占位符='password'/>
登录
)
},
onPress:function（）{
console.log（此用户值）；
}
});
module.exports=表单；

我想访问第一个组件的

的value属性。我知道在为ref属性提供的回调函数中只有组件构造函数可用

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

如果这个问题是重复的，我很抱歉，我对这个术语不熟悉，也不熟悉。

您可以使用

---

然而，我怀疑这不是你想做的。您正试图从

获取值，但这应该通过

的

onChange

回调来完成，该回调将在其父级中设置值

类似于

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

并将其传递给

然后将始终可以访问

值：

this.state.inputValue

您可以使用

---

然而，我怀疑这不是你想做的。您正试图从

获取值，但这应该通过

的

onChange

回调来完成，该回调将在其父级中设置值

类似于

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

并将其传递给

---

然后，

值将始终可访问：

this.state.inputValue

回调

可能会有帮助you@TheReason你能ellaborate@Abhishek你的用例是什么？在大多数情况下，如果父级需要访问子级，那么这是一个糟糕的设计。我发现自己问了同样的问题，然后发现自己做得更好solution@leo我想访问表单组件中的元素。我想我可以使用ReactDOM.findDOMNode，但有没有其他方法可以实现这一点？你几乎做到了-请参阅我的答案

回调
可能会有所帮助you@TheReason你能ellaborate@Abhishek你的用例是什么？在大多数情况下，如果父级需要访问子级，那么这是一个糟糕的设计。我发现自己问了同样的问题，然后发现自己做得更好solution@leo我想访问表单组件中的元素。我想我可以使用ReactDOM.findDOMNode，但是有没有其他方法来实现这一点呢？你就快到了-看我的answer@Abhishek请记住，这是一种反应方式，而不是解决方法。我强烈建议您阅读本文-快乐编码；-）仔细观察后，我发现每次我们在输入字段中键入内容时，组件都会被渲染，您确定这是执行此操作的方法吗？是的，绝对正确，因为您设置了状态。如果您想避免rerenderI道歉，也可以使用这个。inputValue=inputValue，但我不认为多次呈现组件是最佳的，您确定这是一种方式吗？函数render（）被调用，但这并不意味着react会改变任何东西。事实上，如果标记不依赖于this.state.inputValue，则不需要这样做。但是如果它确实不依赖于this.state.inputValue，那么this.inputValue=inputValue比this.setState（{inputValue:e.target.value}）要好，因为render（）不会被调用。@Abhishek记住这是反应方式，而不是解决方法。我强烈建议您阅读本文-快乐编码；-）仔细观察后，我发现每次我们在输入字段中键入内容时，组件都会被渲染，您确定这是执行此操作的方法吗？是的，绝对正确，因为您设置了状态。如果您想避免rerenderI道歉，也可以使用这个。inputValue=inputValue，但我不认为多次呈现组件是最佳的，您确定这是一种方式吗？函数render（）被调用，但这并不意味着react会改变任何东西。事实上，如果标记不依赖于this.state.inputValue，则不需要这样做。但如果它确实不依赖于this.state.inputValue，则this.inputValue=inputValue优于this.setState（{inputValue:e.target.value}），因为不会调用render（）。
var Input = React.createClass({
   render() {
    return <input {...this.props} onChange={this.props.handleChange} />
   }
})

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

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