javascript - 在 React 的父组件中使用按钮提交表单

Question

所以我必须在模态中实现一个表单，如您所见，模态中的按钮不是表单中的按钮。我将表单创建为模态的子组件。如何使用父组件中的按钮提交表单。我正在使用 React Semantic-UI作为我的 UI 框架使用react。

我想如果我可以隐藏表单中的按钮并使用 JavaScript 触发它。我认为这可以通过 getElementById 来实现，但是否有一种 react 方式来做到这一点？

我当前的模态框如下所示:

<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

最简单的解决方案是使用 HTML form Attribute

将“id”属性添加到您的表单:id='my-form'

<Form id='my-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>

将适当的“表单”属性添加到表单外的所需按钮:form='my-form'

<Button positive form='my-form' content='Submit' value='Submit'  />