Question

这里我定义了一个选择组件，我想在条件为真时显示它。 This select field appears when one of the values of the previous select input is selected.但这里是当新的选择字段（即我的选择组件），我从这个选择中选择一个值时，这个值不是由我的表单提交的，并且在我提交表单后执行控制台日志时不存在于我的数据中，但值字段的名称在那里，但没有值。我的控制台中有一条警告，说明： 警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

检查Controller

的渲染方法

我的选择组件

export const SelectCompanyField = () => {
    // const [page, setPage] = useState(1);
    // const [perPage, setPerPage] = useState(10);
    const { data, error } = useSWR<ServerResponse, any>(companyUrls.base, url => getDataByParams(companyUrls.base));
    console.log("Data", data, "Error", error);
    console.log(data?.entities);


    return (

        <Select

            showSearch
            placeholder="Choisir une compagnie"
            optionFilterProp="children"
            filterOption={(input, option: any) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {data?.entities.map(d => (
                <option value={d.index} key={d.id}  >
                    {d.name}
                </option>
            ))}

        </Select>


    );
};

条件为真时显示的选择组件

<Col md={24} lg={24} sm={24}>


                    {firstOptionValue &&
                        <div className="ant-form-item">
                            <label className="label">Compagnie <span className="text-danger">*</span></label>

                            <Controller

                                as={<SelectCompanyField />}
                                name="company"
                                control={control}
                                defaultValue={""}
                                rules={{ required: false }}

                            {errors.company && "Company is required"}
                        </div>

                    }
                </Col>

我提交数据的控制台日志

{
    "firstName": "Atom",
    "lastName": "Proton",
    "username": "xyz@test.ml",
    "password": "00789",
    "phoneNumber": "44258569",
    "profile": "ADMIN",
    "userType": "B2B_CLIENT",
    "company": ""
}

带有空引号的公司部分是我在选择组件中选择的字段值的部分。我希望字段或选项的选定值出现在我的数据中，以便我可以提交表单。谢谢

Answer 1

SelectCompanyField 需要：

export const SelectCompanyField = React.forwardRef(() => {
 ...
});

当使用 Controller 的 as 道具渲染时，它会将 ref 道具传递给 as 道具。 React 看到 ref 被传递，但您没有使用 forwardRef 组件。

除此之外，您还需要实际使用 SelectCompanyField 提供的 Controller 中您现在似乎没有使用的 ref（和道具）

docs will help you out

☝️ 请阅读文档，但您的 SelectCompanyField 会收到这样的道具：

export const SelectCompanyField = React.forwardRef(({field,meta}) => {
   const { onChange, onBlur, value, ref } = field

   return <Select onChange={onChange} value={value} .../>
});

将 onChange 处理程序和 value 添加到您正在呈现的 Select 组件是您的工作。我不知道它是什么 Select 组件 - 它是组件框架的框架吗？它只是一个普通的select吗？ - 所以我不能告诉你怎么做，但是钩子形式的文档很清楚。

不能给函数组件提供 refs。尝试访问此引用将在选择组件中失败

1 个答案: