绑定来自父级的多个反应组件答案

【问题标题】：binding multiple react components from the parent绑定来自父级的多个反应组件
【发布时间】：2017-03-08 06:28:23
【问题描述】：

我刚开始使用 React，对某些事情感到困惑。假设我有一个 Login 控制器视图（智能组件），然后是一个 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 时，不是所有的 TextInputs 都会调用相同的 onChange 方法而不是两个单独的方法吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

是的，调用了相同的函数。改变的是参数。这只是老派 JS。 input 会将 change 事件作为第一个参数传递给 onChange 函数。

您需要在一个或另一个组件中处理它。

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

【讨论】：

【解决方案2】：

感谢refs 我们可以为每个低级元素设置不同的引用。不管是傻还是聪明。您的高级组件包含：

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

您的低级组件包含： <input type="text" ref="yourElement" onChange={this.props.textInput} />

这个例子给你一些线索。注意细节：选择器：refs 但元素：ref。有时您需要两个级别的refs。在这种情况下，它将是 text: ReactDOM.findDOMNode(this.refs.yourComponent.refs.yourElement).value

【讨论】：