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

Question

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

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

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

Answer 1

您可能可以更好地安排它，但这很有效

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

  - - - -

  <Autocomplete
      value={selected}

Answer 2

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