我使用 Material 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
)。我该如何重定向它?
最佳答案
您应该设置 type
带有 onClick={(e) => { handleRequestPasswordRecover(e)...
的按钮的属性至"button"
(即 <button type="button"...
)。
按钮的默认类型是 submit
.
关于javascript - 如何重定向文本字段输入进入表单提交的命令而不是按钮中途表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56376928/