在react中将表单数据传递给父类

IT技术 reactjs
2021-05-21 20:44:49

我有以下react类：

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>
    );
  }
})

外部表单提交后，我需要得到一个包含内部表单值的 json，例如

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

我猜FormBox需要在每个内部表单上调用onSubmit，但是感觉不太对。

如何执行？谢谢

1个回答

你是对的，在每个子组件上调用 onSubmit 不是你在react中这样做的方式。取而代之的是，您应该在外部保存一个包含 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>
    );
  }
})

其它你可能感兴趣的问题
上一篇新日期作为react关键props？ 下一篇警告：Prop `className` 不匹配 ~ Material UI css 在重新加载时任意中断