javascript - 按“输入”键时表单提交不起作用

Question

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


        </ >
    )


}

标签： javascriptreactjsforms

Answer 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)
            }


        </ >
    )
}