如何达到所有输入字段值并在表单中使用按钮提交？

Question

我想做的很简单，只需获取输入字段值并通过单击按钮对其进行处理。

function TableFooterPanel() {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const sampleMethod = (x, y) => {
        console.log(x + y)
    }

    return (

        <>
            <Card className='buttonFooter'>
                <Form className='buttonFooter'>
                    <input type="text" placeholder="First Name" defaultValue={firstName} onClick={setFirstName}></input>
                    <input type="text" placeholder="Last Name" defaultValue={lastName} onClick={setLastName}></input>
                    <Button onClick={() => sampleMethod(firstName, lastName)}>Add</Button>
                </Form>
            </Card>

        </>

    );

}
export default TableFooterPanel;

一般来说，这方面的示例是使用每个输入字段的单独 handleChange() 方法完成的，但我不想为每个输入字段创建单独的函数，所以我还是使用了 useState。如何使用这些参数调用 sampleMethod ？我无法使用 useState 正确更新值。

Answer 1

您可以使用 FormData.

我的另一个建议是向表单添加一个 onSubmit 事件。比较方便。

按钮应该是 type="submit"。当用户点击它时，表单的 onSubmit 事件将被触发。

Answer 2

如果您将输入字段用作文本，则需要 onChange :

<input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>

这样您在输入中输入的文本将保存在状态中。

如何达到所有输入字段值并在表单中使用按钮提交？

How to reach all input field values and submit with button in form?

html

javascript

typescript

reactjs

react-hooks