我想有两个提交按钮,我的形式。
两者都将使用相同的输入和表单验证,但执行不同的任务
export default function Formtwosubmits() {
function handlesubmit_task1(){
}
function handlesubmit_task2(){
}
return (
<>
<form onSubmit={handlesubmit_task1 if task 1 button pressed || handlesubmit_task2 if task2 button pressed } >
<Button variant="contained" color="primary" type="submit">
task 1
</Button>
<Button variant="contained" color="primary" type="submit">
task 2
</Button>
.... here input fields
</form>
</>
);
}
我不明白如何为不同的按钮传递不同的句柄和函数
我试过:
export default function Formtwosubmits() {
function handlesubmit_task1(){
}
function handlesubmit_task2(){
}
return (
<>
<form >
<Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task1}>
task 1
</Button>
<Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task2}>
task 2
</Button>
.... here input fields
</form>
</>
);
}
将onClick
放在按钮上。使用type=submit
,但这不会检查表单验证(如必填等),而使用onSubmit,我看到表单验证已检查
我怎样才能用onClick
触发表单验证呢?这对我也有帮助
4条答案
按热度按时间izkcnapc1#
在
form
元素上使用React ref来访问提交处理程序中的表单字段,并将提交处理程序附加到每个按钮的onClick
处理程序。演示
更新
您可以为每个提交按钮分配一个
id
,并访问React Synthetic event'snativeEvent
以获取底层浏览器事件和submitter值。创建一个
submitHandler
来接收表单的onSubmit
事件,检查submitter值,并将onSubmit
事件代理到基于id
的适当处理程序。flvlnr442#
你可以这样写:
要点是获取触发表单提交的按钮的名称。
o3imoua43#
在按钮本身上使用
onClick
并添加type='submit'
以提交它。zf9nrax14#
这对我很有效,使用
event.nativeEvent.submitter.id
:表单(注意,每个按钮的id属性值都是不同的):
经办人:
它成功地在控制台
btn1
或btn2
中打印,具体取决于您单击的表单按钮。注:使用React 18.2.0。