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

Question

I am quite new to react js. Have searched a bit but haven't got an answer to this question:

Suppose I have two dynamic input tables in my page, and each of them is a separate component. And the lines are different components (React classes) as well. And on the page, there is a save button. Once the save button is clicked, all the information of the page should be gathered and pushed to server as a JSON string.

The very obvious approach for me is to gather the information via jQuery. This will definitely work. But it makes me feel it is not the react way of doing it. Since react data is one way binding, I am not quite sure how to handle this situation more appropriately. Any suggestions?

Answer 1

As always, there are a few ways of doing this.

1. Using refs .

You can assign references to input fields and then loop through them to get the values. The good thing about this approach is that no events are needed, but you still have to somehow know the reference to each. It adds complexity if you have dynamic fields or heavily nested fields. This is still my preferred way, mainly because you don't need events (eg keyup, blur, change, depending on your usage)

2. Using state

This makes it easier to instantly get values, if the values are updated in state as soon as the user makes a change to the field. Obviously you will need to know when a change has been made so you need events.

Your event callback can do one of many things, such as

• update a global state object (eg via redux)
• update form's values (or state) object via context usage

I hope this helps plan your forms.

Answer 2

Please check out this simplified example: https://jsfiddle.net/352v4n72/2/

It has three components. The most basic one is Input , which informs its parent when the value is changed:

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

Now, its parent component, 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>
    );
  }
});

This component holds three Input components. When each of them changes, the onInputChange function is called, and this function basically aggregates all the input values, creating a whole "line" data.

The last component is 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>
    );
  }
});

This component holds three lines, and just like the line aggregates Input 's, Table aggregates Line 's. You can see the state as it changes in the console.