Question

考虑这个组件

{"success":0,"msg":"The e-mail address is already in use"}

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

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;的value属性。据我所知，只有组件构造函数在为ref属性提供的回调函数中可用。

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

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

Answer 1

您可以使用refs

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

然后

this._pass.yourValueFunction()

但是，我怀疑这不是你想要做的。您尝试从<Input />获取值，但应该使用onChange来自<Input />的回调来设置其父级值。

像...一样的东西。

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

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

1 个答案: