当按钮位于不同的组件中时，如何使按钮像表单的提交按钮一样工作？

Question

我正在尝试在 React 中制作一个简单的“我的帐户”页面，用户可以在其中编辑 his/her 帐户详细信息。我有两个组件，导航栏和表单本身，但是，表单的提交按钮在导航栏组件中，而表单本身在 accountdetails 组件中。它们都共享一个父组件 (App.js)。如何让屏幕右上角的按钮（编辑按钮）充当表单的提交按钮，以便我的所有表单验证都有效，并且用户无法提交不正确的数据。

您可以在这里找到相应的代码： https://github.com/bazuka1995/LeapDev-User-Account

Answer 1

您可以尝试在表单组件中创建一个不可见的提交按钮，并从您的 App.js 组件传递一个 ref 给它。然后，您可以在 App.js 中创建一个函数，该函数以编程方式单击表单中的不可见按钮。然后可以将此函数传递给导航栏上的按钮并触发 onClick。请参阅以下示例：

App.js

...
export default App = () => {
    const submitButtonRef = useRef(null);
    
    const submitForm = () => {
        if (submitButtonRef) {
            submitButtonRef.current.click();
        }
    }
    
    return (
        ...
            <Navbar submitForm={submitForm} />
            <FormComponent submitButtonRef={submitButtonRef} />
        ...
    )
}

导航栏组件

...
export default Navbar = ({submitForm}) => {

    return (
        ...
            <button onClick={()=>submitForm()}>Submit</button
        ...
    )

表单组件

...
export default FormComponent = ({submitButtonRef}) => {

    return (
        ...
            <button 
                style={{display: "none"}} 
                htmlType="submit" 
                ref={submitButtonRef}
            >
                Submit
            </button>
        ...
    )

我只是一个新手，所以任何建议都将不胜感激。谢谢！

当按钮位于不同的组件中时，如何使按钮像表单的提交按钮一样工作？

How do I make a button act like a submit button for a form when it's in a different component in react?

javascript

css

forms

validation

reactjs