如何清除自动完成值

Question

我正在使用 Material ui 自动完成功能。

 <Autocomplete
    multiple
    id="tags-outlined"
    options={options}
    getOptionLabel={(option) => option && option.name}
    value={catArray}
    onChange={handleCategoryFilter}
    filterSelectedOptions
    renderInput={(params) => (
     <TextField
      {...params}
      variant="outlined"
      placeholder="Categories"
     />
    )}
/>

首先我希望所选值不要显示在选项中，其次我想清除自动完成功能。你能指导我如何做这些事情吗？

我正在通过

setCatArray([])

清除值，但它不起作用

Answer 1

您可以使用material ui autocomplete 的默认属性

filterSelectedOptions

。如果为 true，它将隐藏列表框中选定的选项。

为了清除自动完成的值，它在选择框的末尾给出默认的清除图标。您可以从那里清除它。

尝试我的沙箱链接。还可以尝试一些更多的材料 UI 演示这里。

UPDATE

：如果您想管理清算值，您可以使用自动完成的

value

属性，并通过更新其值在

onchange

中管理它。

 <Autocomplete
    multiple
    id="tags-outlined"
    options={top100Films}
    value={values}
    getOptionSelected={(option, value) => value.title === option.title}
    getOptionLabel={(option) => option.title}
    filterSelectedOptions
    onChange={(e, valueTags) => {
      e.preventDefault();
      const valuesArray = [];
      valueTags.forEach((valueTag) => {
        valuesArray.push({
          title: top100Films
            .filter((tag) => valueTag.title === tag.title)
            .shift().title
        });
      });
      setValues(valuesArray);
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        variant="outlined"
        label="filterSelectedOptions"
        placeholder="Favorites"
      />
    )}
  />

Answer 2

您是否尝试过将

autocomplete=false

添加到组件的属性列表中？

Answer 3

如果您想从自动完成中过滤掉选定的选项。将

filterSelectedOptions={true}

传递给您的组件

其次，您可以通过控制所选值并将其设置为空数组来清除该值。这是我的完整示例

const options = ["one", "two", "three", "four"];

export default function MyAutocomplete() {
  const [values, setValues] = React.useState<string[]>([]);
  const onChange = (_, value) => {
    setValues(value);
  };
  const clearSelected = () => {
    setValues([]);
  };

  return (
    <>
      <button onClick={clearSelected}>Clear selected</button>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={options}
        getOptionLabel={(option) => option}
        value={values}
        onChange={onChange}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField {...params} variant="outlined" placeholder="Categories" />
        )}
      />
    </>
  );
}

实例

Answer 4

    const options = ["one", "two", "three", "four"];

export default function MyAutocomplete() {
  const [values, setValues] = React.useState([]);
  const onChange = (_, value) => {
    setValues(value);
  };
  const clearSelected = () => {
    setValues([]);
  };

  return (
    <>
      <button onClick={clearSelected}>Clear selected</button>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={options}
        getOptionLabel={(option) => option}
        value={values}
        onChange={onChange}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField {...params} variant="outlined" placeholder="Categories" />
        )}
      />
    </>
  );
}

Answer 5

对我来说，当值 (

catArray

) 初始化为

null

或

undefined

时，就会发生这种情况。

我将其设置为

const [catArray, setCatArray] = useState<Cat[]>([])

（初始值是一个空数组），这解决了我的问题。