在多个自动完成中设置值

Question

我使用 React Material-UI 和 react-hook-form，如果使用多个属性，我不能 setValue。

谁能帮帮我。

这是我的组件：

    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => {
        // eslint-disable-next-line no-console
        // console.log(field);
        // console.log('field.value', field.value);
        return (
          <AutocompleteMaterial
            disableClearable={disableClearable}
            {...field}

            onBlur={() => {
              if ((!field.value || (Array.isArray(field.value) && field.value.length === 0)) && persistValue) {
                field.onChange(persistValue);
              }
            }}
            multiple={multiple}
            freeSolo={false}
            filterSelectedOptions={multiple}
            disabled={disabled}
            options={options}
            getOptionLabel={option => option.title}
            className="w100"
            onChange={(_e, data) => {
              // console.log('onChange', data);
              return field.onChange ? field.onChange(data) : () => {};
            }}
            renderInput={params => {
              return (
                <TextField
                  {...params}
                  className="style-ip"
                  variant="standard"
                  size={multiple ? 'small' : 'medium'}
                  helperText={error ? error.message : ''}
                  error={!!error}
                />
              );
            }}
          />
        );
      }}
    />

当我 setValue 没有多个 setValue('field', { title: 'title', value: 'value' }); 。效果很好

当我setValue有多个。我一直在尝试设置数组或字段，但它的工作。

Answer 1

试试这个，因为多个值存储在一个数组中：

setValue('field', [{ title: 'title', value: 'value' }]);

编辑：您还需要使用controlled mode才能更新Autocomplete的值。为此，在初始渲染时为 Autocomplete 的 value 属性提供一个非空值：

const { control, setValue } = useForm({
  defaultValues: {
    name: []
  }
});

<Controller
  name="name"
  control={control}
  render={({ field, fieldState: { error } }) => {
  ...

在多个自动完成中设置值

Setting value in multiple Autocomplete

reactjs

autocomplete

material-ui

react-hook-form

现场演示