反應事件生命週期

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