リアクションイベントのライフサイクル

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 

を行きます