Question

我很反应js。搜索了一下，但没有得到这个问题的答案：

假设我的页面中有两个动态输入表，每个表都是一个单独的组件。这些行也是不同的组件（React类）。在页面上，有一个保存按钮。单击保存按钮后，应收集页面的所有信息并将其作为JSON字符串推送到服务器。

对我来说非常明显的方法是通过jQuery收集信息。这肯定会奏效。但它让我觉得这不是做反应的方式。由于反应数据是单向绑定，我不太清楚如何更恰当地处理这种情况。有什么建议？

Answer 1

与往常一样，有几种方法可以做到这一点。

<强> 1。使用refs。

您可以为输入字段分配引用，然后循环它们以获取值。这种方法的好处是不需要任何事件，但你仍然必须知道对每个事件的引用。如果您有动态字段或重度嵌套字段，则会增加复杂性。这仍然是我的首选方式，主要是因为您不需要事件（例如，键盘，模糊，更改，具体取决于您的使用情况）

<强> 2。使用州

如果用户对字段进行更改后值立即更新，则可以更轻松地立即获取值。显然，您需要知道何时进行了更改，因此您需要进行事件处理。

您的事件回调可以执行许多操作之一，例如

更新全局状态对象（例如，通过redux）
通过context用途

我希望这有助于规划您的表单。

Answer 2

请查看此简化示例：https://jsfiddle.net/352v4n72/2/

它有三个组成部分。最基本的是Input，它在值发生变化时通知其父级：

var Input = React.createClass({
  render: function() {
    return (
        <input type="text" placeholder={this.props.name}
            onChange={e => this.props.onInputChange(e.currentTarget.value)} />
    );
  }
});

现在，它的父组件Line：

var Line = React.createClass({
  onInputChange(inputId, value) {
    var obj = {};
    obj[inputId] = value;
    this.setState(obj, state => {
      this.props.onLineChange(this.props.lineId, this.state);
    });
  },
  render: function() {
    return (
        <div>
        <Input name="firstName" onInputChange={value => this.onInputChange('firstName', value)} />
        <Input name="lastName" onInputChange={value => this.onInputChange('lastName', value)} />
        <Input name="email" onInputChange={value => this.onInputChange('email', value)} />
      </div>
    );
  }
});

该组件包含三个Input组件。当每个变化时，调用onInputChange函数，此函数基本上聚合所有输入值，创建一个完整的“行”数据。

最后一个组件是Table：

var Table = React.createClass({
  onLineChange(lineId, value) {
    var obj = {};
    obj[lineId] = value;
    this.setState(obj, state => console.log(this.state));

  },
  render: function() {
    return (
        <div>
        <Line lineId={1} onLineChange={this.onLineChange} />
        <Line lineId={2} onLineChange={this.onLineChange} />
        <Line lineId={3} onLineChange={this.onLineChange} />
      </div>
    );
  }
});

此组件包含三行，就像聚合Input的行一样，Table聚合Line。您可以在控制台中看到状态发生变化。

在React Js中检索一系列不同子组件的数据的最佳方法

2 个答案: