Question

有没有人知道如何在onBlur之前触发onClick事件？

在Chrome开发工具中使用模拟器，这是我在移动设备上看到的行为。但是在桌面上，onClick永远不会激发。

class EventLifeCycleTest extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
        event: '',
      divStyle: {display: 'none'}
    };
  }

  handleOnBlur() {
    this.setState({
        event: this.state.event + ' onBlur',
      divStyle: {display: 'none'}
    });
  }

  handleOnFocus() {
    this.setState({
        event: this.state.event + ' onFocus',
      divStyle: {display: 'block'}
    });
  }

  handleOnClick() {
    this.setState({event: this.state.event + ' onClick',});
  }

  render() {
    return (
        <div>
        <div>
          <input 
            onFocus={() => this.handleOnFocus()} 
            onBlur={() => this.handleOnBlur()} 
          />
        </div>
        <div>
          Event: {this.state.event}
        </div>
        <div style={this.state.divStyle}>
          <button onClick={() => this.handleOnClick()} >Click Me</button>
        </div>
      </div>
    );
  }
}

http://jsfiddle.net/tmeskill/m9r87jnt/

谢谢，

Answer 1

在您的情况下尝试使用onMouseDown代替onClick。

通常订单

mousedown
blur
mouseup
click

React Events生命周期

1 个答案: