状态更新时自动完成的值不会改变

Question

每次单击交换按钮时，我都无法更改自动完成值。

我有 2 个自动完成的应用程序，从和到。单击交换按钮后，在交换功能中，我将切换状态

状态切换有效，但自动完成输入中的值没有改变。我怎样才能做到这一点？谢谢

下面是代码以及codeSandbox https://codesandbox.io/s/combobox-material-demo-forked-yup8d?file=/demo.js

export default function ComboBox() {
  const [from, setFrom] = useState({});
  const [to, setTo] = useState({});

  const onChangeTo = (e, value) => {
    setTo(value);
  };

  const onChangeFrom = (e, value) => {
    setFrom(value);
  };

  const swap = () => {
    setFrom(to);
    setTo(from);
  };
  return (
    <>
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        options={top100Films}
        value={from.label}
        sx={{ width: 300 }}
        onChange={(e, value) => onChangeFrom(e, value)}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        options={top100Films}
        value={to.label}
        sx={{ width: 300 }}
        onChange={(e, value) => onChangeTo(e, value)}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
      <Button variant="outlined" onClick={() => swap()}>
        SWAP
      </Button>
    </>
  );
} 

Answer 1

您可以提供有效的、已定义的初始状态，以便输入保持为受控输入。

const [from, setFrom] = useState({ label: '' });
const [to, setTo] = useState({ label: '' });