如何在反应时从另一个组件调用 onSubmit 事件？

Question

我正在构建下一个 js 应用程序。 不幸的是，我必须创建两个组件，因为设计至关重要。 在一个组件中，我必须添加表单，而在另一个组件中，我必须添加提交按钮。 一切都很好，但是如何从放置提交按钮的另一个组件调用 onSubmit 事件。 请帮我。

第一个组件（表单组件）

import { Box, InputBase } from "@mui/material";
import { useForm } from "react-hook-form";

const OrderPlaced = () => {
    const {
        register,
        handleSubmit,
        formState: { errors }
    } = useForm();
    const onSubmit = (data, e) => {
        console.log(data)
    }
    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <InputBase {...register("name")} />
        </Box>
    );
};
export default OrderPlaced;

这是提交按钮组件

import { Box, Button} from "@mui/material";

const SubmitButton= () => {
    return (
        <Box>
            <Button type="submit">Submit Data</Button>
        </Box>
    );
};
export default SubmitButton;

有没有办法做到这一点。 请帮我？

Answer 1

你可以想一个棘手的问题。 首先，我可以看到您正在使用react-hook-form 。 那么你必须有一个公共组件来调用这两个组件。 你也应该给他们。 但是没问题。 在这里我可以制作一个组件。 假设您的主要组件名称是 App Component。

import { Box } from "@mui/material";
import { useForm } from "react-hook-form";
import OrderPlaced from "./OrderPlaced" // Call OrderPlace component
import SubmitButton from "./SubmitButton" // Call SubmitButton component

const App= () => {
    const {
        register,
        handleSubmit,
        formState: { errors }
    } = useForm();
    const onSubmit = (data, e) => {
        console.log(data)
    }
    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <OrderPlaced register={register} />
            <SubmitButton />
        </Box>
    );
};
export default App;

在 App 组件中，我们应该使用reack-hook-form 。 我们可以将register作为 props 传递给任何组件。 这就是窍门。 只是您应该在form标签内调用SubmitButton组件。 只是它。

那么您的OrderPlaced组件将是-

import { Box, InputBase } from "@mui/material";

const OrderPlaced = ({register}) => {
    return (
        <Box>
            <InputBase {...register("name")} />
        </Box>
    );
};
export default OrderPlaced;

现在您可以对任何组件使用 register。 只需传递道具。 您不必更改SubmitButton组件。 就是这样。 当您使用 react-hook-form 时，您可以通过这种方式进行。 谢谢..