Question

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

delta = df_pivoted.subtract(df_trans, fill_value=0)

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"))

我收到一个不存在blur（）函数的错误。我了解Material UI使用自定义el。创建用户界面，我只定位div或其他任何内容。因此，问题是使用TextField组件时获得确切行为（专注于select事件）的另一种方式吗？或者我做错了什么？

材料界面v1.3.1 |反应v16.4.2

Answer 1

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

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

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

Answer 2

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

以下解决方案对我有用。

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

从TextField选择组件，材质UI和React手动失去焦点

2 个答案: