我正在使用MUI 自动完成组件和反应钩式。我跟踪了这个回答。
ControlledAutoComplete.jsx
import { Autocomplete, TextField } from "@mui/material";
import React from "react";
import { Controller } from "react-hook-form";
const ControlledAutoComplete = ({
options = [],
label,
renderInput,
getOptionLabel,
control,
defaultValue,
name,
errors,
}) => {
return (
<Controller
defaultValue={defaultValue}
name={name}
control={control}
render={({ field }) => (
<Autocomplete
options={options}
getOptionLabel={getOptionLabel}
defaultValue={defaultValue}
renderInput={(params) => (
<TextField
{...params}
label={label}
error={errors[name]}
helperText={errors[name] && errors[name].message}
onChange={(e, data) => field.onChange(data)}
/>
)}
{...field}
isOptionEqualToValue={(option, value) =>
value === undefined || value === "" || option.id === value.id
}
/>
)}
/>
);
};
export default ControlledAutoComplete;AddFees.jsx
<ControlledAutoComplete
control={control}
name="enrollmentId"
options={[{ id: 1, firstName: "John"}, { id: 2, firstName: "Jen" }]}
getOptionLabel={(option) => `${option.firstName}`}
label="Select Students"
errors={errors}
defaultValue={""}
/>我被警告了,
给Autocomplete提供的值无效。没有一个选项与
0匹配。您可以使用isOptionEqualToValue道具来自定义等式测试。
发布于 2022-04-23 16:47:53
我做错了。我在文本字段上监听onChange,而它应该在AutoComplete上
const ControlledAutoComplete = ({
options = [],
label,
renderInput,
getOptionLabel,
control,
defaultValue,
name,
errors,
}) => {
return (
<Controller
name={name}
control={control}
defaultValue={defaultValue}
render={({ field }) => (
<Autocomplete
options={options}
getOptionLabel={getOptionLabel}
renderInput={(params) => (
<TextField
{...params}
label={label}
error={errors[name]}
helperText={errors[name] && errors[name].message}
/>
)}
{...field}
isOptionEqualToValue={(option, value) =>
value === undefined || value === "" || option.id === value.id
}
onChange={(_, data) => field.onChange(data)}
/>
)}
/>
);
};使用,
<ControlledAutoComplete
control={control}
name="enrollmentId"
options={students}
getOptionLabel={(option) => `${option.firstName}`}
label="Select Students"
errors={errors}
defaultValue=""
/>https://stackoverflow.com/questions/71980889
复制相似问题