reactjs 多控制自动完成多个和单一的选择

hsgswve4  于 11个月前  发布在  React
关注(0)|答案(1)|浏览(158)

我试图编码一个多控制自动完成,可以为多个和单一的选择/秒。显然,这似乎是一个简单的任务,你可以完成设置为真/假的自动完成组件的多个 prop ,但实际上当多个 prop 设置为假(即单一选择),我开始得到警告和不需要的行为(即输入不显示),如您在此代码sandBox中所见
我很困惑,因为在文档中,没有提到不同的设置,如果你想单一或多个选择
有人可以建议我如何修复我的代码,使它可以为单一和多个选择?
我尝试设置isOptionallyToValue属性,但是当倍数设置为false时,我无法显示国家。

fzsnzjdm

fzsnzjdm1#

这些是使用react-hook-form的MUI自动完成时的关键点:

  • 定义适当的默认值。
  • 使用MUI自动完成。
  • 不要将react-hook-form.onChange钩子属性直接应用于自动完成组件。

默认值

当使用react-hook-form与MUI自动完成时,你应该在使用react-hook-form钩子时提供一个正确的默认值。react-hook-form不能知道你是否要使用一个单一选择的自动完成,这意味着value是typeof string或多个选择,然后value prop是typeof string[]

const { control, handleSubmit } = useForm({
  defaultValues: {
    country: multiple ? ([] as string[]) : "",
    // even better
    country: multiple ? ([] as string[]) : options[0],

  },
});

字符串

isOptionToValue

由于MUI自动完成依赖于对象引用相等性,但Control组件返回选项的副本,而不是选项本身,因此您应该设置isOptionEqualToValue以测试选项是否基于唯一属性相等,例如:

isOptionEqualToValue={(option, value) => option.label === value.label

adjust onChange

默认情况下,Control会传递onChange handler,它接受值event.target.value。好吧,我们不想要这个值,所以我们应该覆盖它:

<Autocomplete
  {...field}
  onChange={(event: any, newValue: string | null) => {
    return field.onChange(newValue);
  }}
  ...

最终结果

你可以改变multiple属性来自动完成单/多
sandbox
验证码:

import * as React from "react";
import { Controller, useForm } from "react-hook-form";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Autocomplete from "@mui/material/Autocomplete";

export default function CountrySelect({ multiple = true }) {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      country: multiple ? ([] as CountryType[]) : options[0],
    },
  });
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name={"country"}
        control={control}
        render={({ field }) => {
          return (
            <Autocomplete
              {...field}
              onChange={(
                event: any,
                newValue: CountryType[] | CountryType | null
              ) => {
                return field.onChange(newValue);
              }}
              multiple={multiple}
              options={options}
              // getOptionLabel={(option) => options.label}
              isOptionEqualToValue={(option, value) =>
                option.label === value.label
              }
              renderInput={(params) => (
                <TextField {...params} label={"country"} />
              )}
            />
          );
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

interface CountryType {
  code: string;
  label: string;
  phone: string;
  suggested?: boolean;
}

// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const options: readonly CountryType[] = [
  { code: "AD", label: "Andorra", phone: "376" },
  {
    code: "AE",
    label: "United Arab Emirates",
    phone: "971",
  },
  { code: "AF", label: "Afghanistan", phone: "93" },
  {
    code: "AG",
    label: "Antigua and Barbuda",
    phone: "1-268",
  },
  { code: "AI", label: "Anguilla", phone: "1-264" },
  { code: "AL", label: "Albania", phone: "355" },
  { code: "AM", label: "Armenia", phone: "374" },
  { code: "AO", label: "Angola", phone: "244" },
  { code: "AQ", label: "Antarctica", phone: "672" },
  { code: "AR", label: "Argentina", phone: "54" },
  { code: "AS", label: "American Samoa", phone: "1-684" },
  { code: "AT", label: "Austria", phone: "43" },
];

相关问题