使用状态对输入变量做出反应的最佳方式是什么？

Question

我对反应还很陌生我在 React Typescript 中有一个输入表单，我想使用 useState 挂钩来存储名称、电子邮件和其他输入标签的值。我正在使用这样的状态：

type Props = {
    name: string,
    email: string,
    message: string,
}

const ContactMe = () => {
    const [formInputs, setFormInputs] = useState<Props>({
        name: '',
        email: '',
        message: '',
    });
    const handleData = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
    }

这样的方法是否正确，或者我是否需要为每个输入元素设置一个单独的状态？

Answer 1

Is it the right approach like this or should I need to have a separate state for each input element?

您可以为小表单的每个输入元素使用单独的状态，为大表单使用对象。

因为您需要像这样设置新值时克隆对象：

setFormInputs({
    ... formInputs,
    name: 'newName'
})

它可能会导致大形式的性能问题，我建议使用react-hook-form以获得更好的性能

使用状态对输入变量做出反应的最佳方式是什么？

What is the best way to use states in react for input variables?

forms

typescript

reactjs

react-hooks

use-state