按钮类型='提交'与 onClick答案

【问题标题】：button type='submit' with onClick按钮类型='提交'与 onClick
【发布时间】：2020-01-09 14:16:24
【问题描述】：

submit 或 onClick 哪个函数将首先运行？还是它们会同时运行？

在我的程序中，onClick 函数首先运行，然后是 onSubmit。但是为什么而且总是这样呢？

<Form onSubmit={handleSubmit}>
    <Form.Field>
        <label>Enter new password:</label>
        <input 
            type="text"
            name= 'newPassword'
            onChange={handleOnChange} 
            placeholder='New Password' 
            required
            />
    </Form.Field>
    <Button type='submit' onClick={handleClick}>Submit</Button>
</Form>

【问题讨论】：

把它想象成一棵树。当您单击按钮时，按钮中的 onclick 是树的树桩，它首先运行。然后它开始向外，再往上爬到树上，树干就提交了，然后它运行了。这就是为什么 onclick 会先运行。
我的意思是点击后，表单提交。首先看到点击事件触发是不是合乎逻辑的，因为点击是触发后一个事件提交的前一个事件？
@TheMaster 似乎合乎逻辑，谢谢
我还有一个问题：这些函数会在另一个函数之后触发，还是可能会出现handleOnClick函数在handleOnSubmit之后完成的情况？
尝试在handleClick 和最后的return false; 中运行一个长循环。另请阅读event.preventDefault() PS：您需要使用@ 通知我们。您还应该在新帖子中提出新问题。

标签： javascript html reactjs frontend

【解决方案1】：

如果您使用 formik，您可以将 handleSubmit 传递给您的按钮 onClick，并在回调 onSubmit 中使用您的代码和逻辑

<Form onSubmit={(values) => yourHandleSubmitMethod(values)}>
    <Form.Field>
        <label>Enter new password:</label>
        <input 
            type="text"
            name= 'newPassword'
            onChange={handleOnChange} 
            placeholder='New Password' 
            required
            />
    </Form.Field>
    <Button type='submit' onClick={handleSubmit}>Submit</Button>
</Form>

【讨论】：