onChange 事件上的 Blur Material UI Select 組件

Question

默認情況下，MaterialUI 的 Select 組件在選擇一個選項后會自動聚焦。 這種行為可以在他們的文檔中的所有示例中看到

一旦選擇了某些東西，我希望元素變得模糊。 這是我的代碼目前的樣子：

const App = () => {
    const [selectedValue, setSelectedValue] = useState('')

    const selectElement = useRef(null);

  return (
        <Select
            native
            ref={selectElement}
            value={selectedValue}
            onChange={(evt) => {
                setSelectedValue(evt.target.value)

                // Attempt at blurring the element upon selection using the useRef:
                selectElement.current.blur(); // Nothing happens

                // Attempt at blurring the element upon selection using activeElement:
                document.activeElement.blur(); // Get Error: "Property 'blur' does not exist on type 'Element'."
            }}
        >
            <option value='option 1'>Option 1</option>
            <option value='option 2'>Option 2</option>
            <option value='option 3'>Option 3</option>
        </Select>
  );
};

正如您在代碼中看到的那樣，我嘗試使用我發現的兩種不同方法來做到這一點：

通過useRef() ：這什么都不做，沒有錯誤或任何東西，但不會模糊我的元素
通過document.activeElement ：這給了我一個錯誤，顯然類型元素上不存在屬性blur 。

選擇一個選項后模糊我的 Select 組件的正確方法是什么？

Answer 1

將一些評論總結成一個答案：

正如@2pha 所建議的那樣，使用evt.target.blur()可能是通往 go 的途徑：

const App = () => {
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <Select
      native
      value={selectedValue}
      onChange={(evt) => {
        setSelectedValue(evt.target.value);

        console.log(document.activeElement); // <select>
        evt.target.blur();
        console.log(document.activeElement); // <body>
      }}>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
      <option value="option 3">Option 3</option>
    </Select>
  );
};

沙盒： https://codesandbox.io/s/empty-night-oqlgr

ref 不起作用，因為它被轉發到根元素（一個div ）而不是select元素。

您看到的與document.activeElement相關的錯誤看起來與 TypeScript 相關。 您看到它是因為document.activeElement一般類型為Element ，它沒有blur方法。 您需要指定HTMLSelectElement類型，但似乎不值得采用該路線，因為僅使用evt.target更直接。

Answer 2

受@ericgio 和@Ryan Cogswell 的啟發，有另一種方法可以解決這個問題。 對於非原生元素，我們可以將setTimeout function 分配給onClose ，這將在從菜單中選擇選項后模糊元素。

const App = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <div>
        <Select
          style={{ width: '200px' }}
          native
          value={selectedValue}
          onChange={(evt) => {
            setSelectedValue(evt.target.value);
            evt.target.blur();
          }}>
          <option value="option 1">Option 1</option>
          <option value="option 2">Option 2</option>
          <option value="option 3">Option 3</option>
        </Select>
      </div>
      <FormControl style={{ width: '200px' }}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          onClose={() => {
            setTimeout(() => {
              document.activeElement.blur();
            }, 0);
          }}
          value={age}
          onChange={handleChange}>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

沙盒：- https://codesandbox.io/s/wonderful-microservice-xufqc

onChange 事件上的 Blur Material UI Select 組件

問題描述

2 個解決方案

解決方案1
3 已采納 2020-12-30 00:01:41

解決方案2
2 2020-12-31 13:43:58

onChange 事件上的 Blur Material UI Select 組件

問題描述

2 個解決方案

解決方案1 3 已采納 2020-12-30 00:01:41

解決方案2 2 2020-12-31 13:43:58

解決方案1
3 已采納 2020-12-30 00:01:41

解決方案2
2 2020-12-31 13:43:58