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

Posted 2023-02-22

【中文标题】在 React 中使用父组件中的按钮提交表单

【英文标题】：Submit Form using Button in Parent Component in React

【发布时间】：2017-10-19 02:38:50

【问题描述】：

所以我必须在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>

【问题讨论】：

如果你想以反应的方式来做，你应该把输入值存储在某个地方（例如state，redux-form），这样你以后可以得到它们。

【参考方案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();
    // ...

【讨论】：

那个函数实际上只是一个等待填充的骨架函数。

这似乎不起作用，也没有给我任何错误，它们

似乎是这样..实际上我猜 Semantic UI React 处理它们的形式不同，我会尝试另一种方式并很快更新以前的答案，请稍等

但是，表单提交的时候会执行哪个动作呢？你的 Form 组件有 handleSubmit() 函数吗？如果是的话，你能不能通过 console.log 看到你提交的表单中的一些值？

让我们continue this discussion in chat.

【参考方案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'  />

【讨论】：

不错的优雅解决方案 +1

我必须设置 button type='submit' 才能工作，很好的发现！

最佳解决方案 IMO

所有者应该接受这个答案作为正确的答案。谢谢巴甫洛！

【参考方案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");  

【讨论】：

这很聪明，但我添加了一个细节：如果您使用类组件，请不要忘记构造函数this.childComponent = React.createRef();。