时间戳

首页 > 解决方案 > 在对输入变量做出反应时使用状态的最佳方法是什么？

reactjs - 在对输入变量做出反应时使用状态的最佳方法是什么？

问题描述

我对反应还很陌生，我在 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();
    }

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

标签： reactjstypescriptformsreact-hooksuse-state

解决方案

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

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

因为您需要在设置新值时克隆对象，如下所示：

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

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

推荐阅读