如何访问反应子状态?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (9)

我的结构如下:

FormEditor-持有多个字段编辑器FieldEditor-编辑表单的字段,并在其状态下保存有关它的各种值

当在FormEditor中单击按钮时,我希望能够从所有用户中收集有关字段的信息FieldEditor组件,处于其状态的信息,并将其全部包含在FormEditor中。

之外存储有关字段的信息。FieldEditor状态并将其放入FormEditor而是状态。然而,这将需要FormEditor听每一个FieldEditor组件更改并将其信息存储在其状态中。

我就不能直接进入子状态吗?

提问于
用户回答回答于

可以:

var FieldEditor = React.createClass({ 
  handleChange: function(event) {
    var text = event.target.value;
    this.props.onChange(this.props.id, text);
  },

  render: function() {
    return (
      <div className="field-editor">
        <input onChange={this.handleChange} value={this.props.value}/>
      </div>
    );
  }
});

var FormEditor = React.createClass({
  getInitialState: function() {
    return {};
  },
  handleFieldChange: function(fieldId, value) {
    var newState = {};
    newState[fieldId] = value;

    this.setState(newState);
  },

  render: function() {
    var fields = this.props.fields.map(function(field) {
      var props = {
        id: field, 
        onChange: this.handleFieldChange, 
        value: this.state[field]
      }
      return <FieldEditor {...props} />
    }, this);

    return (
      <div>
        {fields}
        <div>{JSON.stringify(this.state)}</div>
      </div>
    );
  }
});

var App = React.createClass({
  render: function() {
    var fields = ["field1", "field2", "anotherField"];

    return (
      <FormEditor fields={fields}/>
    );
  }
});


React.render(<App/>, document.body);

用户回答回答于

如果要访问组件的子组件的状态,可以分配一个名为ref。此属性接受一个回调函数,该回调函数传递给附加组件的引用。此回调将在组件挂载或卸载后立即执行。

ES5:

<FieldEditor
    ref={function(fieldEditor1){this.fieldEditor1 = fieldEditor1;}}
    {...props}
/>

ES6:

<FieldEditor
    ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;}
    {...props}
/>

在这些示例中,引用存储在父组件上。要在代码中调用此组件,可以使用:

this.fieldEditor1

然后使用this.fieldEditor1.state为了得到州。

扫码关注云+社区