使用React中父组件中的Button提交表单 [英] Submit Form using Button in Parent Component in React

问题描述

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

So I have to implement a form in modal, as you can see, the button in the modal are not the buttons in the form. I created the form as a child component of the modal. How can I submit the form using the button in the parent component. I am using React Semantic-UI react as my UI framework.

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

I think if I can hide the button in the form and trigger it using JavaScript. I think this might be achieved via getElementById, but is there a react way of doing it?

我当前的Modal看起来像这样：

My current Modal looks like this:

<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>

我的表单代码如下所示：

My form code looks like this:

<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>

推荐答案

你的 makeActivityInfoUpdateHandler 功能看起来像？

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

I assume you did it by the following way, and just continue adding more code to make it work for you:

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

1/ Add ref to your Form, then you can access the Form in the parent (Modal):

<Modal>

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

</Modal>

2 /然后在 makeActivityInfoUpdateHandler 函数中：

2/ Then in the makeActivityInfoUpdateHandler function:

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

}

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

The above code is the way you should do, please post here some more details in case this doesn't work yet!

===========
以下版本 :( 与作者讨论后，我们一起找到了一个好方法！）：

=========== EDITED VERSION BELOW: (after discussion with the author, and we together found a good way around!):

现在的想法是将 ref 放在按钮上（此按钮具有 type =submit，并且它属于表格），然后当点击外面的按钮时，我们只需要调用 ref <的 click（）函数/ code>按钮[这是作者本人的聪明想法]

The idea now is put the ref on a button (this button has type="submit", and it belongs to the form), then when the button outside is clicked, we just need to call the "click()" function of the ref button [which is a smart thinking from the author himself]

（实际上，来自semantic-ui的组件是经过修改和改进的版本，不再是标准格式，所以我上面的方法在尝试提交表单时可能无效，但是，下面的方式可行）

代码现在看起来像：

1 /添加 ref 到按钮o形式：

1/ Add ref to the button on the form:

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

2 /然后在 makeActivityInfoUpdateHandler 函数中，触发点击（）上面的按钮：

2/ Then in the makeActivityInfoUpdateHandler function, trigger click() of the above button:

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

}

这篇关于使用React中父组件中的Button提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！