如何在react-hook-form v7中为useForm的register传递动态name参数

问题根因 #

你的代码存在两个问题：

1. 给register传参格式错误：register要求第一个参数是字符串类型的表单字段名，你传入了{name}对象，不符合参数要求
2. 冗余混用Controller和register两套注册逻辑，二者选其一即可完成表单字段注册

修复方案 #

方案1：保留register写法，删除冗余Controller

该方案更轻量，适合普通表单场景：

// CustomTextField.js
import React from 'react';
import { TextField, Grid } from '@material-ui/core';

const CustomTextField = ({ name, label, register, required}) => {
    return (
        <Grid item xs={12} sm={6}>
            <TextField
                {...register(name)} // 直接传入字符串类型的name变量即可
                label={label}
                required={required}
                fullWidth
            />
        </Grid>
    )
}

export default CustomTextField

父组件代码无需修改，直接沿用现有逻辑即可。

方案2：保留Controller写法，删除register

如果需要处理复杂受控逻辑、自定义校验等场景，可选择该方案：

// CustomTextField.js
import React from 'react';
import { TextField, Grid } from '@material-ui/core';
import { useFormContext, Controller } from 'react-hook-form';

const CustomTextField = ({ name, label, required}) => {
    const { control } = useFormContext();

    return (
        <Grid item xs={12} sm={6}>
            <Controller 
                control={control}
                name={name}
                render = {({ field }) => (
                    <TextField
                        {...field} // 直接展开Controller返回的field属性
                        label={label}
                        required={required}
                        fullWidth
                    />
                )}
            />
        </Grid>
    )
}

export default CustomTextField

使用该方案时，父组件调用FormInput时可以删除register参数的传递，Controller会自动通过FormProvider完成字段注册。

react-hook-form v7的register本身完全支持动态变量作为name参数，只要保证传入的参数是字符串类型即可正常运行。

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