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

Question

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

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。创建 UI，我的目标只是一个 div 或其他东西。所以问题是使用 TextField 组件时获得确切行为(失去对选择事件的焦点)的另一种方法，或者我可能做错了什么？

Material UI v1.3.1 | react v16.4.2

Answer 1

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

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

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