按“输入”键时表单提交不起作用答案

【问题标题】：form submission doesn't work when press 'enter' key按“输入”键时表单提交不起作用
【发布时间】：2025-12-03 12:50:01
【问题描述】：

当我按下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)
            }


        </ >
    )


}

【问题讨论】：

如果这是针对某个用户的信息，您可能应该将这些状态组合成一个状态对象：{ name, age, surname }，您可以对其进行更新。
FormContainer 来自哪里？
如果你把按钮设为type="submit"会发生什么？
Andy- 在父组件中我有[users, setUsers] 状态。我让所有用户都处于这种状态。
spirift- 它是样式化的组件。

标签： javascript reactjs forms

【解决方案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)
            }


        </ >
    )
}

【讨论】：

但这也不起作用