提取打字稿属性

debugcn 发表于 Dev

埃兰

我有以下内容：

interface Message {
  message?: {
    title?: string;
    description?: string;
    body?: string;
  };
}

const [message, setMessage] = useState<Message>({
    message: {
      title: "",
      description: "",
      body: "",
    },
  });

我试图用这种方法处理表单，在表单中用新创建的值填充表单：

  const handleMessageInput = (
    event: React.ChangeEvent<HTMLInputElement>,
    field: keyof Message
  ) => {
    setMessage({
      ...message,
      [field]: event.target.value,
    });
  };

 <input
            onChange={(e) => handleMessageInput(e, "title")}
            ref={(node) => {
              input = node;
            }}
          />

 <input
            onChange={(e) => handleMessageInput(e, "body")}
            ref={(node) => {
              input = node;
            }}
          />

 <input
            onChange={(e) => handleMessageInput(e, "description")}
            ref={(node) => {
              input = node;
            }}
          />

但是问题是当我提交表格时我没有得到我的值意味着我的状态没有用创建的值来更新，我认为我在提取字段时错过了一些事情，还有一种方法可以避免对我拥有的每个字段使用ref ？有什么帮助吗？

更新：

叶夫根尼（Evgeny Klimenchenko）

嘿，当创建一个状态时，您可以这样定义它：

useState<Message>({
    message: {
      title: "",
      description: "",
      body: "",
    },
})

但是，当您更新它时，您会像这样：

setMessage(
 {
   ...message,
   [field]: event.target.value
 }
)

看到不同？它应该是这样的：


setMessage(
 {
   message: {
     ...message.message,
     [field]: event.target.value
   }
 }
)

这样，您将更新正确的内容，否则，您将message在对象级别附近创建新字段，但是您想更新对象中字段内的message字段

编辑：

要解决该错误，您需要引入一个深层次的类型，以便当您说keyof它将引用正确的键时。

  interface MessageFormValues {
    title?: string
    description?: string
    body?: string
  }

  interface Message {
    message: MessageFormValues
  }

  const handleMessageInput = (
    event: React.ChangeEvent<HTMLInputElement>,
    field: keyof MessageFormValues,
  ) => {
    setMessage({
      message: {
        ...message.message,
        [field]: event.target.value,
      }
    })
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。