javascript - 如何重定向文本字段输入去表单提交的命令而不是按钮中间表单?
问题描述
我使用材质 UI 作为我的组件库。我有一个小对话框,其中有一个“恢复密码”按钮放置在表单内的某处。- 我注意到添加此按钮后,文本字段中的“输入”命令变为按钮的 onClick 命令。
形式很简单:
type PropTy = {
classes: any,
submit: (Event) => mixed;
handleClose: (Event) => mixed;
handleRequestPasswordRecover: (Event) => mixed;
};
function SigninForm(props:PropTy) {
const {classes, submit, handleClose, handleRequestPasswordRecover} = props;
const signinRef = React.createRef();
const actions = [
<Button
type="reset"
label="Reset"
color="secondary"
style={{ float: 'left' }}
key='reset'
>Reset</Button>,
<Button
label="Cancel"
color="primary"
onClick={handleClose}
key='cancel'
>Cancel</Button>,
<Button
type="submit"
label="Submit"
variant="contained"
color="primary"
key='submit'
autoFocus
>Login</Button>,
];
return (
<form className={classes.form}
onSubmit={submit}
ref={signinRef}
>
<FormControl margin="normal" required fullWidth>
<TextField id="username" name="username" autoComplete="username" autoFocus label={'Username'}/>
</FormControl>
<FormControl margin="normal" required fullWidth>
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}>
<FormLabel htmlFor="password">Password</FormLabel>
<button className={classes.linkButton} onClick={(e) => {
handleRequestPasswordRecover(e)
}}>{'Lost password?'}</button>
</div>
<Input
name="password"
type="password"
id="password"
autoComplete="current-password"
/>
</FormControl>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<div style={{ textAlign: 'right'}}>
{actions}
</div>
</form>);
}
“进入”时发生的动作不是我所期望的“提交”——而是按钮的 onClick 事件(handleRequestPasswordRecover
)。我该如何重定向这个?
解决方案
您应该使用to (ie )设置type
按钮的属性。onClick={(e) => { handleRequestPasswordRecover(e)...
"button"
<button type="button"...
按钮的默认类型是submit
。
推荐阅读
- python - 如何让 matplotlib 连接所有散点?
- typescript - 在没有断言的派生类中使用派生接口属性
- angular - Angular Jasmine 测试:预期是间谍,但未定义
- html - 我的卡只显示背面。为什么这样?
- python - 在不同文件夹中查找具有不同文件名的重复文件,同步它们的文件名
- laravel - 图像源不可读,使用 Laravel 8
- android - 如何在多个 Android 模拟器上运行基于输入的 Python 脚本?
- amazon-web-services - AWS - 迁移失败,表 '' 中列 '' 的错误值被截断为 32768 字节
- makefile - 在 Makefile 中指定目标的路径
- reactjs - 如何更改 MongodB 中对象的各种属性?