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

Question

我刚开始使用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时，不是所有TextInput都将调用同一onChange方法而不是两个单独的方法吗？

Answer 1

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

您将需要在一个组件或另一个组件中进行处理。

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

Answer 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