Я использую материальный пользовательский интерфейс в качестве моей библиотеки компонентов. У меня есть небольшой диалог, в котором есть кнопка «восстановить пароль», расположенная где-то внутри формы. - Я заметил, что после добавления этой кнопки команда "ввод" в текстовых полях становится командой кнопок 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
.
Внутри функции отправки вы можете вызвать preventDefault();
const submit = (event)=>{ event.preventDefault(); }
Вы можете написать приведенный ниже код в своем html на теге форма. Таким образом, вы можете предотвратить отправку формы при нажатии клавиши ввода, сосредоточившись на текстовом поле.
<form className = {classes.form}
onSubmit = {submit}
ref = {signinRef}
onKeyPress = {(event) => {
if (event.key === "Enter") {
event.preventDefault();
}
}}>