我使用材质 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)...
to "button"
(即<button type="button"...
)设置按钮的属性。
默认的按钮类型是submit
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句