Как перенаправить текстовые поля введите команду отправки формы вместо кнопки посередине формы?

Question

Я использую UI материала в качестве библиотеки компонентов.У меня есть небольшой диалог, в котором есть кнопка «восстановить пароль», расположенная где-то внутри формы.- Я заметил, что после добавления этой кнопки команда «enter» в текстовых полях становится командой 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>);
}

Действие, которое происходит на«enter» - это не «submit», как я ожидаю, а событие onClick кнопки (handleRequestPasswordRecover).Как мне перенаправить это?

Answer 1

Вы должны установить атрибут type кнопки с onClick={(e) => { handleRequestPasswordRecover(e)... на "button" (т.е. <button type="button"...).

Тип кнопок по умолчанию: submit.

Answer 2

Вы можете написать приведенный ниже код в html теге form .Таким образом, вы можете предотвратить отправку формы при нажатии клавиши ввода, в то время как фокус на текстовом поле.

<form className={classes.form}
          onSubmit={submit}
          ref={signinRef}
          onKeyPress={(event) => {
                if (event.key === "Enter") {
                   event.preventDefault();
                }
          }}>

Answer 3

Внутри функции отправки вы можете вызывать warnDefault ();

const submit = (событие) => {event.preventDefault ();}