React TypeScript表单提交后数据全部为undefined问题求助

问题代码 #

表单组件代码 #

<Modal
    isOpen={filterModal}
    toggle={collectionsCustomersFilterToggle}
    centered={true}>
    <ModalHeader>Filter Customers by</ModalHeader>
    <ModalBody>
        <form onSubmit={handleSubmit(set_filter)}>
            <FormGroup row className="pb-2">
                <Label for="customerNameFilterText" sm={4}>
                    Customer Name
                </Label>
                <Col sm={8}>
                    <Input 
                        {...register('customerNameFilterText')}
                        className="form-control"
                        placeholder="Search by Customer Name"
                        type="text"/>
                </Col>
            </FormGroup>

            -------------

            <FormGroup check row>
                <Row>
                    <Col sm={4}>
                        <Button
                            className="view btn-secondary"
                            type="button">
                                Clear Filters
                        </Button>
                    </Col>
                    <Col sm={4}></Col>
                    <Col sm={4}>
                        <Button
                            className="btn-primary"
                            type="submit">
                                Apply Filters
                        </Button>
                    </Col>
                </Row>
            </FormGroup>
        </form>
    </ModalBody>
</Modal>

React Hook Form处理代码 #

const {
    register,
    handleSubmit,
    formState: { errors }
} = useForm();

const set_filter = (data: FiltersProps) => {
    collectionsCustomersFilterToggle();
    applyFilter(data);
    console.log("data",data);   
};

提交表单后，打印的data对象所有属性均为undefined，即便已输入内容。

排查方向 #

1. 明确useForm的泛型类型（TypeScript场景） #

如果使用TypeScript，需要给useForm传入对应泛型，确保类型绑定正确：

const {
    register,
    handleSubmit,
    formState: { errors }
} = useForm<FiltersProps>(); // 传入FiltersProps泛型

2. 改用Controller适配UI组件 #

你使用的<Input>属于第三方UI组件（如react-bootstrap），这类组件可能不直接兼容register的ref绑定逻辑，改用Controller包裹即可解决：

import { Controller } from "react-hook-form";

// 解构useForm时新增control
const {
    register,
    handleSubmit,
    control,
    formState: { errors }
} = useForm<FiltersProps>();

// 替换原Input组件
<Controller
    name="customerNameFilterText"
    control={control}
    render={({ field }) => (
        <Input
            {...field}
            className="form-control"
            placeholder="Search by Customer Name"
            type="text"
        />
    )}
/>

3. 检查输入组件的name属性 #

确认最终渲染的input元素是否带有正确的name="customerNameFilterText"属性，部分第三方UI组件会覆盖name值，导致React Hook Form无法识别字段。

4. 确认React Hook Form版本兼容性 #

如果是v7版本，当前register用法正确；如果是v6及以下版本，register的调用方式不同（需手动传入ref等），请核对package.json中的版本并调整用法。

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