reactjs - 当另一个字段更改时，MUI 自动完成更改所选选项

Question

我有两个带有 MUI 和 Formik 的字段，一个普通的 TextField 和一个自动完成字段。我需要在文本字段更改时选择自动完成选项，该怎么做？

在formik中一切正常，值发送了正确的数据，但自动完成不会更改为正确的值。

示例:https://codesandbox.io/s/compassionate-river-f32btt?file=/src/demo.js

Answer 1

options 属性是一个数组，但值由字符串表示。您需要将一个函数传递给 isOptionEqualToValue 属性，AutoComplete 组件将使用该函数来确定项目数组中的哪个项目与当前值匹配。

您还需要将 value 属性移出文本字段并将其直接传递给自动完成功能，以便它可以管理自己的值。

<Autocomplete
  filterSelectedOptions
  id="estado"
  name="estado"
  options={states}
  clearText="Apagar"

  // Add the following props
  isOptionEqualToValue={(option, value) => option.value === value}
  value={formik.values.estado}

  renderInput={(params) => (
    <TextField
      {...params}
      error={Boolean(formik.errors.estado)}
      helperText={formik.errors.estado}
    />
  )}
  onChange={(e, newValue) => {
    formik.handleChange({
      target: { name: "estado", value: newValue.value },
    });
  }}
/>;