verhindern check on checkbox ausgelöst onBlur

Question

Ich erstelle ein Dropdown-Menü mit onFocus und onBlur. Es gibt einen Grund dafür, dass ich onClick nicht verwende, da onFocus und onBlur das Menü nicht manuell schließen muss, wenn ich mehrere Dropdown-Menüs habe.

class Dropdown extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
     open: false 
     } 
    } 

    render() { 
     return(
     <div 
     tabIndex="1" 
     onFocus={() => this.setState({open: true})} 
     onBlur={() => this.setState({open: false})} 
     > 
     <p>Menu</p> 
     <div style={this.state.open === false ? {display: 'none'} : {display: 'block'} }> 
     {this.props.children} 
     </div> 
     </div> 
    ) 
    } 
} 

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

    } 

    render() { 
     return (
      <div> 
      <Dropdown> 
      <li onClick={() => alert('link 1')}>link 1</li> 
      <li onClick={() => alert('link 2')}>link 2</li> 
      <input type="checkbox" label="check"/> 
      </Dropdown> 
      </div> 
     ); 
    } 
} 

Aber das Problem ist, das Kontrollkästchen wird nicht ordnungsgemäß funktionieren, da es onBlur auslösen wird.

Demo http://jsfiddle.net/dL99rx27/

Wie die onBlur verhindern auszulösen, wenn ich auf das Kontrollkästchen klicken? Ich benutze onClick es hat kein solches Problem.

Answer 1

Haben Sie versuchen, die folgende Erklärung zu ändern:

onBlur={() => this.setState({open: false})} 

zu

onBlur={() => this.setState({open: true})} 

Answer 2

Überprüfen Sie, ob das angeklickte Element (mit mousedown-) ist ein INPUT weil Eingänge den Fokus zu ändern. Dies sollte funktionieren, ich habe ein neues Attribut für den Zustand inpClick hinzugefügt, die wahr werden wird, wenn die Eingabe in der Komponente angeklickt wird.

prüfen Demo hier

http://jsfiddle.net/prabushitha/ed9yxun9/1/

class Dropdown extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state = {open: false, inpClick:false}; 
    } 

    render() { 
     return(
     <div 
     tabIndex="1" 
     onFocus={() => this.setState({open: true})} 
     onBlur={() => { 
      if(!this.state.inpClick){ 
      this.setState({open: false}); 
      }else{ 
      this.setState({inpClick: false}); 
      } 
      } 
     } 

      onMouseDown={(e)=>{ 
      if(e.target.nodeName=="INPUT"){ 
       this.setState({inpClick: true}); 
      } 
      } 
      } 
     > 
     <p>Menu</p> 
     <div style={this.state.open === false ? {display: 'none'} : {display: 'block'} }> 
     {this.props.children} 
     </div> 
     </div> 
    ) 
    } 
} 

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

    } 

    render() { 
     return (
      <div> 
      <Dropdown> 
      <div> 
      <li onClick={() => alert('link 1')}>link 1</li> 
      <li onClick={() => alert('link 2')}>link 2</li> 
      <input type="checkbox" label="check" /> 
      <li onClick={() => alert('link 2')}>link 2</li> 
      </div> 
      </Dropdown> 
      </div> 
     ); 
    } 
} 

React.render(<App />, document.body);