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

Question

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

我想如果我可以隐藏表单中的按钮并使用 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添加到你的Form中，然后你就可以在父级（Modal）中访问Form了：

<Modal>

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

</Modal>

2/ 然后在makeActivityInfoUpdateHandler函数中：

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

}

上面的代码是你应该做的，请在这里发布更多细节，以防这还不起作用！

============ 编辑版本如下：（与作者讨论后，我们一起找到了一个好方法！）：

现在的想法是把ref放在一个按钮上（这个按钮有type="submit"，属于窗体），那么当外面的按钮被点击时，我们只需要调用“click()” ref按钮的功能【作者自己的聪明想法】

(其实semantic-ui的组件是经过修改和改进的版本，不再是标准表单，所以我之前的方式在尝试提交表单时可能无法正常工作，但是，下面的方式可以工作)

代码现在看起来像：

1/ 将ref添加到表单上的按钮：

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

2/然后在makeActivityInfoUpdateHandler函数中，触发上述按钮的click()：

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

}

Answer 2

最简单的解决方案是使用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”属性添加到表单外所需的按钮：form='my-form'

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

Answer 3

所选答案很有用。但是其中的方法似乎不再起作用了。以下是我的做法。

你可以在创建子组件时给它一个引用。

<ChildComponent ref={this.childComponent}/>

并在按钮的 onClick 方法中使用它。 （这是按钮的代码）

<Button variant= "light" onClick={this.onClick}>  
    Submit
</Button>

（这是onClick方法）

onClick = (event) => {
    this.childComponent.current.handleSubmit(event);
}

我正在调用子组件中的一个名为 handleSubmit 的方法。它可能看起来像这样。

handleSubmit = (event)=> {
    event.preventDefault();

    //Your code here. For example,
    alert("Form submitted");  
}