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

感谢HomePage我们可以设置不同的引用每个低级元素。无论如何，愚蠢或聪明。您的高级组件包含：

refs

您的低级组件包含： `handleText(){ this.setState({ text: ReactDOM.findDOMNode(this.refs.yourElement).value }) }`

这个例子给你一些线索。注意细节：选择器：<input type="text" ref="yourElement" onChange={this.props.textInput} /> 但元素：refs。您有时需要两个级别ref。在这种情况下，它会 refs

从父母处结合多个反应组分

2 个答案: