Question

我有一个输入框，我想在onFocus和onBlur上显示和隐藏div，它工作正常，但是在按下输入框上的tab时，我希望显示div，但它会一直隐藏，因为焦点一直在松动

任何帮助将不胜感激。

handleBlur = (e) => {
    this.setState({showdiv: false});}
handleFocus = (e) => {
    this.setState({showDiv: true});}
<input type="search"
    onFocus={(e) => this.handleFocus(e)}
    onBlur={(e) => this.handleBlur(e)}
/>;

Answer 1

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showdiv: false
    }
  }
  handleBlur = (e) => {
    this.setState({showdiv: false});}
handleFocus = (e) => {
    this.setState({showDiv: true});
}
onInputKeydown = (e) => {
  e.preventDefault();
  if (e.keyCode === 9) { // tab value is 9
     this.setState({showDiv: true});
  }
}
  render() {
    return (
      <div className="App">
        Hi
        <input type="search"
        onKeyDown={this.onInputKeydown}
    onFocus={(e) => this.handleFocus(e)}
    onBlur={(e) => this.handleBlur(e)}
/>;
      </div>
    );
  }
}

    export default App;

如果在焦点位于输入字段上时按下Tab键，则可以使用onKeyDown事件读取值

在选项卡和onFocus上显示div，在onBlur中隐藏

1 个答案: