所以我必须在模态中实现一个表单，正如你所看到的，模态中的按钮不是表单中的按钮。我将表单创建为模式的子组件。如何使用父组件中的按钮提交表单。我在用React 语义 UI https://react.semantic-ui.com/collections/form#form-example-capture-valuesReact 作为我的 UI 框架。
我想是否可以隐藏表单中的按钮并使用 JavaScript 触发它。我认为这可以通过 getElementById 来实现，但是有没有一种反应方法可以做到这一点？
我当前的模态如下所示：
<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>
最简单的解决方案是使用HTML 表单属性 https://www.w3schools.com/tags/att_form.asp
将“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”属性添加到表单外部所需的按钮：form='my-form'
<Button positive form='my-form' content='Submit' value='Submit' />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
