从 TextField 选择组件、Material UI 和 React 手动失去焦点

Posted 2023-02-22

【中文标题】从 TextField 选择组件、Material UI 和 React 手动失去焦点

【英文标题】：Manually lose focus from TextField select component, Material UI & React

【发布时间】：2019-01-23 15:29:30

【问题描述】：

我有一个选择输入，它是使用 Material-UI 库中的 TextField 组件创建的。选择某些选项后，我需要手动失去焦点。我尝试使用 'inputRef' 属性对 TextField 的引用，效果很好，但是当我尝试在 this.selectInput.current 上触发 blur() 函数时，就像我在这里所做的但没有 MaterialUI 库。

class Select extends React.Component 
  constructor(props) 
    super(props)
    this.state = 
    	selected: ''
    
    
    this.inputRef = React.createRef();
    this.onChangeHandler = this.onChangeHandler.bind(this)
  
  
  onChangeHandler(e)
  
	this.inputRef.current.blur()

  	this.setState(
    	selected: e.target.value
    )
  
  
  render() 
  	const selected = this.state;
  
    return (
      <select value=selected
          onChange=this.onChangeHandler
          ref=this.inputRef>
        <option value=''>Please select</option>
        <option value='1'>One</option>
        <option value='2'>Two</option>
      </select>
    )
  


ReactDOM.render(<Select />, document.querySelector("#app"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

我收到一个错误，即 blur() 函数不存在。我了解 Material UI 使用了自定义 el。创建用户界面，我只针对一个 div 或其他什么。所以问题是在使用 TextField 组件时获得确切行为（失去对选择事件的关注）的另一种方法，或者我做错了什么？

材质 UI v1.3.1 |反应 v16.4.2

【参考方案1】：

我在 react material-ui Select 组件中遇到了类似的模糊事件问题

以下解决方案对我有用。

import Select from '@material-ui/core/Select';
<Select
...
onClose=()=>
    setTimeout(() => 
        setOpen(false)
        handleSubmit();
    , 0);

/>

【参考方案2】：

尝试使用以下主体定义 onClose 方法：

onClose() 
    setTimeout(() => 
        document.activeElement.blur();
    , 0);

然后将此方法传递给选择元素的 onClose 属性。

【讨论】：

有人知道为什么这只适用于setTimeout吗？

我认为它有效，因为你必须失去对 JS 事件循环的下一次迭代的关注，这实际上是通过使用“setTimeout”完成的。