MUI 自动完成（多个）受控值 - 神秘的输入行为答案

【问题标题】：MUI Autocomplete (multiple) controlled values - mysterious input behaviorMUI 自动完成（多个）受控值 - 神秘的输入行为
【发布时间】：2021-12-02 03:12:01
【问题描述】：

我正在尝试编写代码以在键盘输入时异步搜索多选组合。

但是，我在最新版本 (5.2.2) 中发现了一种我无法解释的奇怪行为。我提炼出以下问题（基于 MUI 的自动完成页面的示例）：

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

const options = [
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 }
];

export default function ControllableStates() {
  // const [value, setValue] = React.useState<any | null>([]);
  const value = [];
  const [inputValue, setInputValue] = React.useState("");

  console.log("Current Value:", value);

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : "null"}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        multiple={true}
        value={value}
        onChange={(event: any, newValue: any | null) => {
          //setValue(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />
    </div>
  );
}

codeSandbox如下：https://codesandbox.io/s/controllablestates-material-demo-forked-ygqp2?file=/demo.tsx

如果您在 codeSandbox 中尝试，您将无法在 TextField 字段中输入任何内容。

但是，如果你切换评论：

  const [value, setValue] = React.useState<any | null>([]);
  // const value = [];

您将能够在 TextField 字段中输入内容。这里实际发生了什么？值根本没有变化。

谁能弄清楚为什么我的第一个代码（其中值是一个 const 空数组）不起作用？

我问的原因是我需要将（受控）值作为道具传递，然后将其设置为默认为 [] 如果它为空。我发现由于这种默认设置，我无法在 TextField 中输入内容。

【问题讨论】：

附加说明：我想我发现每次值更改时自动完成都会清除 inputValue（使用 useState，每次渲染都会保留初始数组引用，而没有 useState，[] 是每次重新渲染时都有新的参考）。问题是：这应该是正确的行为，还是即使值改变了 inputValue 也应该保持不变？在文档中指出：⚠️这两个状态是孤立的，它们应该独立控制（mui.com/components/autocomplete/#controlled-states）。我认为应该尊重这一点。

标签： reactjs material-ui

【解决方案1】：

首先，您可以在没有 inputValue 和 OnInputValue 属性的情况下使用 Autocomplete 组件。

      ...
      <Autocomplete
        multiple
        value={value}
        onChange={(event: any, newValue: any | null) => {
          //setValue(newValue);
        }}
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />

但它不适用于选择，只能搜索。

其次，如果您希望它的搜索和选择工作，那么您应该使用更多Autocomplete props。

...
export default function ControllableStates() {
  const [value, setValue] = React.useState<any | null>([]);
  // you need to set the selected value your own
  // const value = [];
  const [inputValue, setInputValue] = React.useState("");

  console.log("Current Value:", value);

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : "null"}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        multiple
        value={value}
        onChange={(event: any, newValue: any | null) => {
          setValue(newValue.map(option => option.value || option));
        }}
        isOptionEqualToValue={(option, value) => option.value === value}
        getOptionLabel={(option) => {
          if (typeof option === 'number') {
            return options.find(item => item.value === option)?.label;
          } else {
            return option.label;
          }
        }}
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />
    </div>
  );
}

如您所见，它也不需要使用 inputValue 和 onInputChange 属性。

请确保您选择的值和选项的类型是否正确。

【讨论】：