React开发（196）:鼠标和指针事件

Posted 2021-11-10 前端小歌谣

class BlurExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
    this.timeOutId = null;

    this.onClickHandler = this.onClickHandler.bind(this);
    this.onBlurHandler = this.onBlurHandler.bind(this);
    this.onFocusHandler = this.onFocusHandler.bind(this);
  }

  onClickHandler() {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  }

  // 我们在下一个时间点使用 setTimeout 关闭弹窗。 
 // 这是必要的，因为失去焦点事件会在新的焦点事件前被触发，  
// 我们需要通过这个步骤确认这个元素的一个子节点  // 是否得到了焦点。
  onBlurHandler() {    this.timeOutId = setTimeout(() => {     
 this.setState({        isOpen: false      });    });  }
  // 如果一个子节点获得了焦点，不要关闭弹窗。 
 onFocusHandler() {    clearTimeout(this.timeOutId);  }
  render() {
    // React 通过把失去焦点和获得焦点事件传输给父节点   
 // 来帮助我们。    return (
      <div onBlur={this.onBlurHandler}          
 onFocus={this.onFocusHandler}>       
 <button onClick={this.onClickHandler}
                aria-haspopup="true"
                aria-expanded={this.state.isOpen}>
          Select an option
        </button>
        {this.state.isOpen && (
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        )}
      </div>
    );
  }
}