React中如何将子组件<StackTag/>的标签状态数组传递给父表单组件？

解决方案 #

你需要将子组件StackTag内部的tags状态同步到react-hook-form的表单数据中，以下是3种可直接落地的实现方案：

方案1：使用setValue手动同步（改动最小） #

这是对原有代码侵入性最低的方案，只需要加少量回调逻辑即可：

1. 修改StackTag组件，新增onTagsChange回调props，每次tags更新时向外通知：

const StackTag = ({ onTagsChange }) => {
  const [tags, setTags] = useState([]);

  // 新增这段副作用，tags变化时触发父组件传入的回调
  useEffect(() => {
    onTagsChange?.(tags);
  }, [tags, onTagsChange]);

  // 原有handleTag、removeTag、渲染逻辑完全保留
  // ...
}

2. 父表单组件从useForm中解构出setValue方法，绑定StackTag的回调：

// 解构新增setValue
const { register, handleSubmit, setValue } = useForm();

// 渲染部分修改StackTag调用
<div className={classes.interestDiv}>
  <label htmlFor='skills'>Skills</label>
  <StackTag onTagsChange={(tags) => setValue('skills', tags)} />
</div>

完成后提交表单时，返回的表单数据中会自动包含skills字段，值就是最新的标签数组。

方案2：使用官方推荐的Controller绑定自定义组件 #

如果后续要给标签加校验规则，推荐用react-hook-form原生的Controller组件做绑定：

1. 上一步修改StackTag新增onTagsChange的逻辑保留
2. 父组件从useForm中解构出control，替换原有渲染逻辑：

import { useForm, Controller } from 'react-hook-form';
// 解构新增control
const { register, handleSubmit, control } = useForm();

// 渲染部分
<div className={classes.interestDiv}>
  <label htmlFor='skills'>Skills</label>
  <Controller
    name="skills"
    control={control}
    defaultValue={[]}
    render={({ field }) => <StackTag onTagsChange={field.onChange} />}
  />
</div>

该方案可以直接复用react-hook-form的校验、必填项判断等能力，适配性更强。

方案3：状态提升（无需依赖react-hook-form能力） #

如果不想依赖react-hook-form的API，也可以把标签状态提到父组件维护：

1. 父组件定义标签状态，传入StackTag组件：

const [tags, setTags] = useState([]);

// 渲染时传入状态和修改方法
<StackTag tags={tags} setTags={setTags} />

2. 修改StackTag组件，删除内部的useState定义，直接使用props传入的tags和setTags即可。
3. 表单提交时手动组装数据：

const onSubmit = (formData) => {
  const finalData = { ...formData, skills: tags };
  // 后续处理finalData即可
}

内容的提问来源于stack exchange，提问作者iHopeiGetit