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

Question

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

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

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

Answer 1

选项属性是一个数组，但值是用字符串表示的。您需要将一个函数传递给 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 },
    });
  }}
/>;

Answer 2

你或许可以更好地安排这件事，但这行得通

  const [selected, setSelected] = useState(null);
  
  function onBlurCep(ev, setFieldValue) {
    let selected = states.find((v) => v.label === formik.values.cep) || {};
    setSelected(selected);

  - - - -

  <Autocomplete
      value={selected}

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

MUI Autocomplete change selected option when another field changes

reactjs

material-ui

formik