在React中使用父组件中的button提交表单

所以我必须在模态中实现一个表单，正如你所看到的，模态中的button不是表单中的button。 我创build了表单作为模式的一个子组件。 如何使用父组件中的button提交表单？ 我正在使用React Semantic-UI反应作为我的UI框架。

我想如果我可以隐藏表单中的button，并使用JavaScript触发它。 我想这可能是通过getElementById来实现的，但是有没有反应的方法呢？

我现在的Modal看起来像这样：

<Modal open={this.props.open} onClose={this.props.onClose} size="small" dimmer={"blurring"}> <Modal.Header> Edit Activity {this.props.name} </Modal.Header> <Modal.Content> <ActivityInfoForm/> </Modal.Content> <Modal.Actions> <Button negative onClick={this.props.onClose}> Cancel </Button> <Button positive content='Submit' onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} /> </Modal.Actions> </Modal> 

我的表单代码如下所示：

 <Form> <Form.Group widths='equal'> <Form.Input label='Activity Name' placeholder='eg. CIS 422' /> <Form.Input label='Activity End Date' placeholder='Pick a Date' /> </Form.Group> <Form.Group widths='equal'> <Form.Input label='Total Capacity' placeholder='eg. 30' /> <Form.Input label='Team Capacity' placeholder='eg. 3' /> </Form.Group> </Form> 

Answer 1

你的makeActivityInfoUpdateHandler函数是什么样的？

我假设你是通过以下方式完成的，只需继续添加更多代码以使其适用于您：

1 /将ref添加到您的表格中，然后您可以访问父表格（Modal）：

 <Modal> <Modal.Content> <ActivityInfoForm ref="activityForm" /> </Modal.Content> </Modal> 

2 /然后在makeActivityInfoUpdateHandler函数中：

 makeActivityInfoUpdateHandler = (activityId) => { // ... this.refs.activityForm.getWrappedInstance().submit(); // ... } 

上面的代码是你应该做的方式，请在这里发布一些更多的细节，以防这种情况不起作用！

=========== 编辑版本如下:( 在与作者讨论后，我们一起find了一个很好的解决方法！ ）：

现在的想法是把ref放在一个button上（这个button的type="submit" ，它属于表单），然后当点击外部button时，我们只需要调用“ click() ”函数ref button [这是作者自己的一个聪明的想法]

（ 实际上，semantic-ui中的组件是一个修改和改进的版本，不再是标准forms，所以我以前的方法在提交表单时可能不起作用，但是下面的方法将起作用 ）

代码现在看起来像：

1 /将ref添加到窗体上的button：

 <Form onSubmit={ this.handleSubmit} > <button style={{}} type='submit' ref={ (button) => { this.activityFormButton = button } } >Submit</button> </Form> 

2 /然后在makeActivityInfoUpdateHandler函数中，触发上面的button的click() ：

 makeActivityInfoUpdateHandler = (activityId) => { // ... this.activityFormButton.click(); // ... }