React MUI - 清除自动完成组件上的输入

Question

我有一个自动完成组件，它显示国家名称和标志，如 MUI 文档中的示例所示。

我的目标很简单：单击自动完成组件后，必须清除国家名称，仅显示占位符。

我通过 renderInput 中的一个简单的 onClick 事件实现了这一点，它触发了以下函数：

  const handleClear = (e) => {
    e.target.value = "";
  };

如果尝试代码一切正常，显然。实际上，清除仅在单击国家名称时发生，但如果单击组件的不同部分，如 flag 或 下拉箭头，国家名称只是聚焦，未清除。

简而言之，当前行为：

这里是预期的行为：

有办法解决这个问题吗？

Answer 1

出现这种情况是因为当您单击标志时，e.target 将不是 input 元素，而是包装器 div。你可以看到这只是在 handleClear 函数中添加了一个 console.log：

const handleClear = (e) => {
    console.log("clicked TARGET ELEMENT: ", e.target);

    // If you click on the input, will see:
    // <input ...

    // And if you click on the flag, you will see:
    // <div ...
};

如果您想分别控制输入状态值和文本值，您可能应该使用两种状态控制 - 在 MUI 上检查它 docs。

代码将类似于：

export default function CountrySelect() {
  const [value, setValue] = useState(null);
  const [inputValue, setInputValue] = React.useState("");

  const handleClear = (e) => {
    console.log("clicked TARGET ELEMENT: ", e.target);
    setInputValue("");
  };

  return (
    <Autocomplete
      id="country-select-demo"
      disableClearable
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      inputValue={inputValue}
      onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
      }}
      openOnFocus
      sx={{ width: 300 }}
      options={countries}
      autoHighlight
      getOptionLabel={(option) => option.label}
      renderOption={(props, option) => (
        <Box
          component="li"
          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
          {...props}
        >
          <img
            loading="lazy"
            width="20"
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
            alt=""
          />
          {option.label} ({option.code}) +{option.phone}
        </Box>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          placeholder="Choose a country"
          onClick={handleClear}
          InputProps={{
            ...params.InputProps,
            startAdornment: value ? (
              <InputAdornment disablePointerEvents position="start">
                <img
                  loading="lazy"
                  width="48"
                  src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`}
                  srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`}
                  alt=""
                />
              </InputAdornment>
            ) : null
          }}
        />
      )}
    />
  );
}

Answer 2

您可以使用 onOpen 属性并在其中传递 handleClear 函数，而不是在 TextField 上使用 onClick。然后就可以了。只要自动完成打开，所选值就会被清除。

工作演示：CodeSandBox.io

React MUI - 清除自动完成组件上的输入

React MUI - Clearing input on Autocomplete component

reactjs

material-ui