Блог

Главная - Вопросы по программированию - отправка формы не работает при нажатии клавиши «ввод»

отправка формы не работает при нажатии клавиши «ввод»

#javascript #reactjs #forms

Вопрос:

Когда я нажимаю enter клавишу, я получаю эту ошибку: Form submission canceled because form is not connected . Но Add User кнопка работает правильно.

  function Form({ modal, showModal, onAddUser }) {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [age, setAge] = useState('');

    const createUser = (e) => {
        if (!name || !age || !surname) {
            return;
        } else {
            onAddUser(name, age, surname)
            console.log(name, age)

        }
        setName('');
        setAge('')
        setSurname('');
        showModal(false)

        console.log(e);

    }
    return (

        <>
            {modal ? <FormContainer onSubmit={createUser}>
                <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" />
                <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" />
                <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" />
                <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button>
                <Button type="button">Add User</Button>

            </FormContainer>
                : (null)
            }


        </ >
    )


}

Комментарии:

1. Если это информация для одного пользователя, вам, вероятно, следует объединить эти состояния в один объект состояния: { name, age, surname } который вы можете обновить.

2. Откуда это FormContainer берется?

3. Что произойдет, если вы нажмете кнопку type="submit" ?

4. Энди — в родительском компоненте у меня есть [users, setUsers] состояние. Я держу всех пользователей в этом состоянии.

5. spirift — это стилизованный компонент.

Ответ №1:

Вам следует изменить тип кнопки «Добавить пользователя» на submit вместо button . Кроме того, вам следует позвонить e.preventDefault() при отправке формы.

Ваш компонент должен быть таким,

 function Form({ modal, showModal, onAddUser }) {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [age, setAge] = useState('');

    const createUser = (e) => {
        // add this line here to prevent `form` element default behaviour
        e.preventDefault();

        if (!name || !age || !surname) {
            return;
        } else {
            onAddUser(name, age, surname)
            console.log(name, age)

        }
        setName('');
        setAge('')
        setSurname('');
        showModal(false)

        console.log(e);

    }
    return (

        <>
            {modal ? <FormContainer onSubmit={createUser}>
                <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" />
                <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" />
                <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" />
                <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button>
                {/* here we changed type="button" to type="submit" */}
                <Button type="submit">Add User</Button>

            </FormContainer>
                : (null)
            }


        </ >
    )
}

Комментарии:

1. Но это тоже не работает

Метки: