使用 react-hook-form 时如何区分普通按钮和提交按钮？

Question

好吧，我正在为网站创建一个注册模式。这是一个 3 页的表单，所以我将它分成 3 个不同的表单组件。所以目标是在第一个表单页面上，我有条件地呈现一个下一步按钮和一个“有帐户？登录”按钮。当我单击下一步按钮时，它会移动到表格 2，并且“有帐户？登录”按钮变为后退按钮。然后当我再次单击下一个按钮时，我转到表单 3，下一个按钮更改为提交按钮，该按钮将用于提交表单。我从 twitch 注册表中获得灵感。问题是所有按钮都包含在表单标签中，因此，它们都充当提交按钮，即使我只希望第 3 页上的提交按钮充当提交按钮。我会在下面添加所需的代码。

yup 架构：

const schema = yup.object().shape({
    name: yup.string().required(),
    email: yup.string().email().required(),
    password: yup.string().min(8).max(20).required(),
  });

const {register, handleSubmit, formState: { errors }} = useForm({resolver: yupResolver(schema)});

const onSubmit = (data) => console.log(data)

有条件的形式：

const [form, setForm] = useState(1)

let view = null

    if(props.form === 1){
        view = <SignupForm1 
                    register={props.register} />
    }else if(props.form === 2){
        view = <SignupForm2 
                    register={props.register}/>
    }else{
        view = <SignupForm3 
                    register={props.register}/>
    }

实际形式：

                 <div  className='w-full h-96 flex flex-col pt-5 gap-5 px-5'>
                    <form onSubmit={props.handleSubmit(props.onSubmit)} >
                        {view}

                        {props.form > 2 ? 
                        <button type='submit' className='w-full mt-5 h-10 rounded-md bg-learnode-green1 bg-opacity-10 font-semibold'>Submit</button> : 
                        <button  className='w-full mt-5 h-10 rounded-md bg-learnode-green1 bg-opacity-10 font-semibold disabled:bg-gray-300 disabled:bg-opacity-9 disabled:text-gray-500' onClick={() => props.setForm(box => box +1)}>Next Step</button>
                        }

                        {props.form > 1 ? 
                        <button className='w-full h-10 rounded-md bg-gray-50 bg-opacity-5 text-xs text-green-400 ' onClick={() => handleBack()} >Back</button> : 
                        <button className='w-full h-10 rounded-md bg-gray-50 bg-opacity-5 text-xs text-green-400 ' onClick={() => handleClick2()} >Already have an account? Login</button>
                        }
                    </form>
                </div>

如您所见，我创建了一个表单状态并将其启动到表单 1。每当用户单击下一步按钮时，它都会移动到下一页，直到到达表单 3 然后按钮变为提交按钮。提交按钮是唯一带有 type = 'submit' 的按钮，但如果我单击任何其他按钮，它仍然会提交。有没有办法让表单知道它只是我要提交表单的提交按钮，或者我必须以另一种方式重新排列我的表单？

Answer 1

在您的表单中，所有按钮都包含在同一个表单标签中，因此它们都充当

submit

按钮。

要解决此问题，请将按钮和表单拆分为单独的组件，并使用状态或道具在它们之间传递数据。