Javascript 提取类型脚本属性

我有以下资料：

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

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

接口消息{
留言{
标题？：字符串；
description？：字符串；
正文？：字符串；
};
}
const[message，setMessage]=useState({
信息：{
标题：“，
说明：“，
正文：“，
},
});

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

  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;
            }}
          />

const handleMessageInput=(
事件：React.ChangeEvent，
字段：消息的关键字
) => {
设置消息({
消息
[字段]：event.target.value，
});
};
handleMessageInput（e，“标题”）}
ref={（节点）=>{
输入=节点；
}}
/>
handleMessageInput（e，“body”）}
ref={（节点）=>{
输入=节点；
}}
/>
handleMessageInput（e，“描述”）}
ref={（节点）=>{
输入=节点；
}}
/>

但问题是，当我提交表单时，我得不到我的值意味着我的状态没有用创建的值更新，我认为我在提取字段时遗漏了一些内容，还有没有办法避免对我拥有的每个字段使用ref？有什么帮助吗

更新：

---

嘿，当创建一个状态时，您将其定义为：

useState({
信息：{
标题：“，
说明：“，
正文：“，
},
})

但当你更新它时，你会这样做：

setMessage(
{
消息
[字段]：event.target.value
}
)

看到区别了吗？应该是这样的：

设置消息(
{
信息：{
…留言，留言，
[字段]：event.target.value
}
}
)

这样，您将更新正确的内容，否则您将在对象的

消息

级别附近放置新字段，但您希望更新对象中

消息

字段内的字段

编辑：

要修复错误，您需要引入一个深层类型，这样当您说

keyof

时，它将引用正确的键

interface MessageFormValues{
标题？：字符串
描述？：字符串
正文？：字符串
}
接口消息{
message:MessageFormValues
}
常量handleMessageInput=(
事件：React.ChangeEvent，
字段：MessageFormValues的键，
) => {
设置消息({
信息：{
…留言，留言，
[字段]：event.target.value，
}
})
}

奇怪的是，为什么TypeScript没有向您发出任何警告。感谢您的帮助，我没有注意到这一点，但我们发现了另一个错误，我在问题中添加了一个更新，请看pls@A.H嘿，我包括了编辑和修复，你只需删除

消息

作为顶层，因为你并不真的需要这个，它也会解决你的问题，这个新的错误，让我知道如果它有帮助，我不能改变我的接口结构，因为我有一个特定的类型，我需要匹配我的后端；）。所以这是不可能的，现在它成功了！谢谢你，伙计；）但另一件事，你知道如何避免在每个输入中使用ref吗？做一个普通的？