反应事件生命周期

Question

有谁知道如何让onClick事件在onBlur之前触发？

在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