React：为什么自动完成会无意中重置所选值？

Question

晚上好，我正在尝试解决自动完成值被重置的问题。当我更改 UI 的状态时会发生这种情况（沙箱中的示例）。如果用户决定返回并更改它，我希望该值仍然存在。我不明白为什么自动完成会这样反应，但我还没有找到解决方案。

有什么解决办法的建议吗？

Link: https://codesandbox.io/s/sharp-diffie-6ikc6?file=/index.js

Answer 1

您应该使用 controlled 版本的自动完成功能。该问题是由 onInputChange 回调引起的，它不仅在选择选项时触发。在你的情况下，React 从 DOM 中删除了自动完成（因为你的 switch）并且它用空值触发 onInputChange，所以你的状态变为空字符串。

为避免这种情况，您应该改用 value 和 onChange。 onChange 仅当您更改选项时才会触发。

const [value, setValue] = useState(null);

<Autocomplete
  value={value}
  disablePortal
  id="combo-box-demo"
  options={movies.sort(
    (a, b) => -b.distributor.localeCompare(a.distributor)
  )}
  onChange={onInputChange}
  groupBy={(option) => option.distributor}
  getOptionLabel={(option) => option.movie}
  sx={{ width: "100%", paddingRight: 2 }}
  renderInput={(params) => (
    <TextField
      style={{ backgroundColor: "#fff", marginLeft: 25 }}
      {...params}
      label="Movie"
    />
 )}
  selectOnFocus={false}
/>

查看：https://codesandbox.io/s/peaceful-shamir-r2dwi?file=/index.js

React：为什么自动完成会无意中重置所选值？

React: Why does autocomplete unintentionally reset the selected value?

javascript

autocomplete

typescript

reactjs

react-hooks