React Hook Form 控制组件。两个输入作为一个值

Question

我正在尝试创建一个组合组件/输入字段，其中包含一个下拉列表和简单的文本字段。 我认为我需要使用反应钩子形式的

useController

选项，但这是我能做的。 我确信我可以将两个名称传递给该组件并分别获取两个值，以便在提交期间将它们合并为一个，但是...... 如果可能的话，我想从这两个字段中获取单个值。

例如，选择字段有国家/地区电话前缀选项，输入字段将是免费的。 因此，如果我获得选择值

+44

和值

1234567890

我想将它们合并为单个值。意思是

[phone]

.

我使用了react-hook-form中的

register

和

control

，但我不知道如何将这些值合并为一个。

任何将两个输入字段统一为一个的帮助或示例将不胜感激。

Answer 1

如果您使用react-hook-form，则有一个概念手表。您可以观察一个或多个字段发生的变化。

const { register, handleSubmit, watch } = useForm();

  const watchFields = watch(["code", "phone"]);

这是一个工作示例