首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >MUI:提供给Autocomplete的值是与‘0’匹配的选项的invalid.None

MUI:提供给Autocomplete的值是与‘0’匹配的选项的invalid.None
EN

Stack Overflow用户
提问于 2022-04-23 15:10:18
回答 1查看 3.2K关注 0票数 0

我正在使用MUI 自动完成组件和反应钩式。我跟踪了这个回答

ControlledAutoComplete.jsx

代码语言:javascript
复制
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

代码语言:javascript
复制
          <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道具来自定义等式测试。

EN

Stack Overflow用户

发布于 2022-04-23 16:47:53

我做错了。我在文本字段上监听onChange,而它应该在AutoComplete

代码语言:javascript
复制
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)}
        />
      )}
    />
  );
};

使用,

代码语言:javascript
复制
          <ControlledAutoComplete
            control={control}
            name="enrollmentId"
            options={students}
            getOptionLabel={(option) => `${option.firstName}`}
            label="Select Students"
            errors={errors}
            defaultValue=""
          />

沙箱实例

票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71980889

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档