使用 React Hook Forms 问题的 React Material UI 自动完成

Question

我在使用 Material UI 组件的 React Hook Forms 时遇到问题，我真的找不到这方面的资源。 我有一个页面，我可以在其中获取国家和当前的个人资料信息，并且我想在表单中显示它。 最初我想将国家设置为德国。

const [countries, setCountries] = useState([]);
const { control, handleSubmit, register, reset } = useForm();
const [currentProfile, setCurrentProfile] = useState<profiles.resProfileFields>();

useEffect(() => {
  const getProfileData = async () => {
    try {
      const profile = await api.get(profiles.getById, { id: profileId });
      if (profile != null && profile != undefined) {
        setCurrentProfile(profile);
        setcountryId(profile.country.id);
      }

    } catch (err) {
      console.log(`error getting: ${err}`);
    }
  };
  getProfileData();
  getCountries();
}, [profileId]);


useEffect(() => {
  reset(currentProfile);
}, [currentProfile]);

const getCountries = () => {
  api
    .get(routes.countries.list, {})
    .then(res => {
      setCountries(res);
    })
    .catch(err => { });
};

<form onSubmit={handleSubmit(onSubmit)}>


  <TextField
    inputRef={register}
    name="name"
    label="* Name"
    InputLabelProps={{
      shrink: true
    }}
    variant="outlined"
    placeholder="Name"
    className="form-item-full"
  />

  <Controller
    name="country"
    as={
      <Autocomplete
        className="form-item"
        options={countries}
        getOptionLabel={option => option.name}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label="Country"
            placeholder="Select a Country"
            InputLabelProps={{
              shrink: true
            }}
            variant="outlined"
          />
        )}
      />
    }
    defaultValue="Germany"
    control={control}
  />
</form>

1. 我如何最初将值设置/重置为德国？
2. 提交时如何发布国家的ID？

Answer 1

在Bill建议的代码框中，您可以看到一个确切的示例。

带有Autocomplete组件的Controller应如下所示：

    <Controller
      render={props => (
        <Autocomplete
          {...props}
          options={countries}
          getOptionLabel={option => option.name}
          renderInput={params => (
            <TextField
              {...params}
              label="Country"
              placeholder="Select a Country"
              InputLabelProps={{
                shrink: true
              }}
              variant="outlined"
            />
          )}
          onChange={(_, data) => props.onChange(data)}
        />
      )}
      name="country"
      control={control}
    />

因为所选国家实际上是 Object，所以您必须在defaultValues中设置德国国家 object：

const { control, handleSubmit, register, reset } = useForm({ 
  defaultValues: {
    country: { name: 'Germany', id: 1234 },
  } 
});

如果您不想在defaultValues Object 中“硬编码”国家/地区，您可以将getCountries调用上移一级并将其传递给表单。 您现在可以在所有数据可用时有条件地呈现表单，并在国家列表中找到国家，如下所示：

const MyForm = ({ countries }) => {
  const { control, handleSubmit, register, reset } = useForm({ 
    defaultValues: {
      country: countries.find(({ name }) => name === 'Germany'),
    } 
  });

Answer 2

这是最简单的方法，它从反应钩子中渲染 Controller 中的Autocomplete组件，使用render function 中的onChange和value来控制值

<Controller
control={control}
name="type"
rules={{
  required: 'Veuillez choisir une réponse',
}}
render={({ field: { onChange, value } }) => (
  <Autocomplete
    freeSolo
    options={['field', 'select', 'multiple', 'date']}
    onChange={(event, values) => onChange(values)}
    value={value}
    renderInput={(params) => (
      <TextField
        {...params}
        label="type"
        variant="outlined"
        onChange={onChange}
      />
    )}
  />
)}