我有一个使用 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
最佳答案
尝试使用以下主体定义 onClose 方法:
onClose() {
setTimeout(() => {
document.activeElement.blur();
}, 0);
}
然后将此方法传递给选择元素的 onClose 属性。
关于javascript - 手动从 TextField 选择组件、Material UI 和 React 中失去焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51880973/