我有一个使用Material-UI 库中的TextField组件创建的选择输入。选择某个选项后,我需要手动失去焦点。我尝试使用“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"))Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
我收到了一个错误,即 blur() 函数不存在。我知道 Material UI 使用了自定义 …