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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
30
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы должны установить атрибут 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();
                }
          }}>

Другие вопросы по теме