Javascript 在onChange事件上模糊材质UI选择组件

默认情况下，MaterialUI的“选择”组件在选择一个选项后会保持聚焦。这种行为可以在他们的生活中的所有例子中看到

我想元素模糊一旦选定的东西。以下是我的代码当前的样子：

const-App=（）=>{
常量[selectedValue，setSelectedValue]=useState（“”）
const selectElement=useRef（null）；
返回(
{
setSelectedValue（evt.target.value）
//尝试在选择时使用useRef模糊元素：
selectElement.current.blur（）；//什么也不发生
//尝试使用activeElement在选择时模糊元素：
document.activeElement.blur（）；//获取错误：“类型'Element'上不存在属性'blur'
}}
>
选择1
选择2
选择3
);
};

正如您在代码中看到的，我尝试使用两种不同的方法来实现这一点：

• 通过

  useRef（）

  ：这不做任何事情、没有错误或任何事情，但不会模糊我的元素

• 通过

  document.activeElement

  ：这给了我一个错误，显然type元素上不存在属性

  blur

---

在选择选项时，模糊我的选择组件的正确方法是什么？

将一些评论总结为答案：

正如@2pha所建议的，使用

evt.target.blur（）

可能是一种方法：

const-App=（）=>{
常量[selectedValue，setSelectedValue]=useState（“”）；
返回(
{
设置所选值（evt.目标值）；
console.log（document.activeElement）；//
evt.target.blur（）；
console.log（document.activeElement）；//
}}>
选择1
选择2
选择3
);
};

沙箱：

ref不工作，因为（a

div

）不是

select

元素

---

您看到的错误与

文档相关。activeElement

看起来与TypeScript相关。您之所以看到它，是因为

document.activeElement

的一般类型为

Element

，它没有

blur

方法。您需要指定

HTMLSelectElement

类型，但似乎不值得这样做，因为使用

evt.target更简单。

受@ericgio和@Ryan Cogswell启发，有另一种解决方法。对于非本机元素，我们可以为

onClose

分配一个

setTimeout

函数，在从菜单中选择选项后，该函数将模糊元素

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>
  );
};

const-App=（）=>{
常量[selectedValue，setSelectedValue]=useState（“”）；
常量[年龄，设置]=React.useState（“”）；
常量handleChange=（事件）=>{
设置（事件、目标、值）；
};
返回(
{
设置所选值（evt.目标值）；
evt.target.blur（）；
}}>
选择1
选择2
选择3
年龄
{
设置超时（（）=>{
document.activeElement.blur（）；
}, 0);
}}
值={age}
onChange={handleChange}>
十
二十
三十
);
};

---

沙盒：-

您需要延迟模糊效果。选择后焦点元素不在屏幕上。看起来您试图模糊选项，但我认为您希望模糊选择本身。尝试

selectElement.blur（）或
evt.target.blur（）
注意ref被转发到根元素（包装器div），而不是
select
，这就是为什么该解决方案什么也不做的原因。您看到的错误看起来与TypeScript相关，但您的问题/代码中没有包含任何键入。我很好奇为什么要模糊select。从可访问性的角度来看，这似乎是一件可怕的事情。谢谢！这适用于本机Select组件，但我也需要将其用于非本机组件，对于任何没有
blur
功能的组件（
evt.target
只有
name
和
value
属性）。在这种情况下，我该怎么做呢？我已经用你的沙盒示例添加了非本机选择组件：@theJuls非本机选择的困难在于计时
onChange
通过单击
MenuItem
触发，在
onChange
时，
MenuItem
仍具有焦点。关闭菜单/选择后，选择的
div
接收焦点。如果在
setTimeout
回调中调用
document.activeElement.blur（）
，它将按需要工作：。