Question

我有以下反应类：

var FormBox = React.createClass({
    render: function() {
        return (
            <h1>Forms:</h1>
            <InternalForm name="foo" />
            <InternalForm name="bar" />
            <form className="externalForm" onSubmit={this.handleSubmit}>
                <input type="submit" value="Post" /> 
            </form>
        );
  }
})
var InternalForm = React.createClass({
    render: function() {
        return (
            <h1>{this.props.name}</h1>
            <form className="internalForm">
                <input type="text"/>
                /* form strucure based on props*/
            </form>
    );
  }
})

在外部表单提交之后，我需要获取一个包含intertal表单值的json，如

{'foo':{},'bar':{}}

我想FormBox需要在每个内部表单上调用onSubmit，但感觉不太正确。

如何表演？感谢

Answer 1

你是对的，在每个子组件上调用onSubmit不是你在做出反应的方式。而不是这个，你应该在你的外部持有一个包含foo和bar值的状态对象。为了使它们保持同步，您应该将回调传递给子表单，以便在需要时更新状态。然后在提交时你只需要使用外部表格的状态。

这样的事情：

var FormBox = React.createClass({
    getInitialState: function() {
      return {
        foo: null,
        var: null
      };  
    },
  
    onChildChange: function(childName, childValue){
      let newState = {};
      newState[childName] = childValue;
      this.setState(newState)
    },
  
    render: function() {
        return (
            <h1>Forms:</h1>
            <InternalForm name="foo" onFormChange={this.onChildChange}/>
            <InternalForm name="bar" onFormChange={this.onChildChange} />
            <form className="externalForm" onSubmit={this.handleSubmit} onChange={this.onChildChange.bind(this, 'bar')}>
                <input type="submit" value="Post" /> 
            </form>
        );
  }
})
var InternalForm = React.createClass({
    onFormChange: function(e) {
        this.props.onFormChange(this.props.name, e.target.value);
    }
  
    render: function() {
        return (
            <h1>{this.props.name}</h1>
            <form className="internalForm">
                <input type="text" onChange={this.onFormChange}/>
                /* form strucure based on props*/
            </form>
    );
  }
})

将表单数据传递给父类的反应

1 个答案: