材质 UI 自动完成清除按钮未清除所选值答案

【问题标题】：Material UI Autocomplete clear button not cleared selected value材质 UI 自动完成清除按钮未清除所选值
【发布时间】：2020-12-08 01:25:57
【问题描述】：

我对自动完成组件有疑问。他工作得很好，直到我需要在提交表单并使状态为空之前清除我的选择（即我改变主意并想要取消选择并留下空白字段）。在文档示例中可以很好地完成此任务，但在我的代码中它不起作用。

这是我的代码：

<Autocomplete 
   classes={{
      root: classes.root
   }}
   style={{padding: 0}}
   options={positionArr} 
   getOptionLabel={(option) => option.name}
   renderInput={(params) => (
      <TextField
         {...params}
         className={`inputPadding`}
         classes={{root: classes.labelRoot}}
         label={t('position')}
         variant="outlined"
         helperText={t('optional')}
      />
   )}
   getOptionSelected={(opt, val) => opt === val}
   value={positionObjTwo}
   onChange={(e, val) => {val && setPositionObjTwo(val)}}
/>

positionArr 看起来像：

[
   {
      id: 1,
      name: 'AB'
   },
   {
      id: 2,
      name: 'AB/2OFF'
   },
   ...
]

【问题讨论】：

单击清除按钮图标时是否出现错误？
不，没什么，实际上它清除了输入，但如果我点击外部输入值再次出现

标签： reactjs material-ui

【解决方案1】：

当val 是"" 时，它不会在onChange={(e, val) => {val && setPositionObjTwo(val)}} 中调用setPositionObjTwo(val)

"" 的计算结果为 false，因此不会执行 && 的第二部分。您可以通过将行更改为来修复

onChange={(e, val) => {(val || val == "") && setPositionObjTwo(val)}} 或 onChange={(e, val) => {setPositionObjTwo(val)}}

【讨论】：

"" 不应评估为假。当我在浏览器控制台中执行此操作时，它会计算为字符串。 ``` const str = "" str && true "" ```
@technicallynick 试试"" == false。（它应该返回 true）也许它在浏览器控制台中有所不同。
我的理解是&& 中的评估比== 更严格（===）
我认为javascript中所有真实的评估都使用==，除非您明确使用===。