gpt4 book ai didi

javascript - onChange 事件上的模糊 Material UI 选择组件

转载 作者:行者123 更新时间:2023-12-04 13:10:56 24 4
gpt4 key购买 nike

默认情况下,MaterialUI 的 Select 组件在选择一个选项后会保持聚焦。这种行为可以在他们的 docs 中的所有示例中看到。
一旦选择了某些内容,我希望元素变得模糊。这是我的代码目前的样子:

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 组件的正确方法是什么?

    最佳答案

    将一些评论总结为一个答案:
    正如@2pha 所建议的,使用 evt.target.blur()可能是要走的路:

    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 不起作用,因为 it's being forwarded to the root element (a div) 不是 select元素。
    您看到的错误与 document.activeElement 有关看起来与 TypeScript 相关。你看到它是因为 document.activeElement一般键入为 Element ,它没有 blur方法。您需要指定 HTMLSelectElement类型,但似乎不值得追求这条路线,因为使用 evt.target 更直接。 .

    关于javascript - onChange 事件上的模糊 Material UI 选择组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65411927/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com