Handle klicken außerhalb der Rückkehr

Question

Ich habe einen Klick, ruft die SetMenu-Funktion (in der KlasseName = "Menü" -Liste), aber ich möchte es nicht in meinen 3 verschiedenen Renditen wiederholen. Stattdessen möchte ich es in seine eigene Funktion/Komponente setzen und es 3 Mal aufrufen.

Aber wenn ich es bewege, kann der Klick das Setmenü nicht mehr finden, auch wenn ich dies noch habe. Setmenu = this.setmen.bind (this); im Konstruktor?

setmenu(event, value){ 

this.setState({showForm: value}); 
console.log(this.state.showForm, "this.state.showForm") 
} 


render() { 


const showForm = this.state.showForm; 

if (showForm === 1){ 
    return (

    <div> 

     <ul className="menu">  
      <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li> 
      <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li> 
      <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li> 
     </ul> 

     <FacebookLoginForm value={this.state.facebookResponse} /> 

    </div> 
); 
} 
else if(showForm === 2) { 
    return (
    <div> 

     <ul className="menu">  
       <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li> 
       <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li> 
       <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li> 
     </ul> 

     <ManualLoginForm /> 

    </div> 


); 
} 
else if (showForm === 3){ 
    return (

    <div> 

     <ul className="menu">  
      <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li> 
      <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li> 
      <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li> 
     </ul> 

     <ManualRegForm /> 

    </div> 
) 

} 
} 

Answer 1

Arbeitsbeispiel: https://jsfiddle.net/wostex/4wcdL6dw/3/

einfach Ihre Funktion als Stütze passieren.

function ThreeLinks(props) { 
    return (
    <div> 
     <ul className="menu">  
      <li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 1)}>Form 1</a></li> 
      <li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 2)}>Form 2</a></li> 
      <li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 3)}>Form 3</a></li> 
     </ul> 
    </div> 
); 
} 

class App extends React.Component { 

    setmenu(event, value){ 
    console.log('setmenu: ', event, value) 
    } 

    render() { 
    return (
     <ThreeLinks clickHandler={this.setmenu.bind(this)} /> 
    ); 
    } 
} 

Answer 2

Einige Variationen über @wostex answer

• lets von href zusätzliche Parameter lesen Attribut stattdessen Handler mit zusätzlichen Argumente des Aufrufs
• Ereignis sollte Ereignis API anstelle der alten Tage Bau href="javascript:void(0)"
• werden verhindern Der Verbindungscontainer kann so viele benötigte Links in sich selbst unterstützen

function Links(props) { 
 
    return (
 
     <div> 
 
      <ul className="menu">  
 
       {props.children.map((e, key) => <li key={key} onClick={props.clickHandler}>{e}</li>)} 
 
      </ul> 
 
     </div> 
 
    ); 
 
} 
 

 
class App extends React.Component { 
 
    constructor() { 
 
     super() 
 
     this.setmenu = this.setmenu.bind(this); 
 
    } 
 
    
 
    setmenu(event, value){ 
 
     event.preventDefault(); 
 
     console.log('setmenu: ', event.target.getAttribute('href')) 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <Links clickHandler={this.setmenu}> 
 
       <a href="3">Form 3</a> 
 
       <a href="2">Form 2</a> 
 
      </Links> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, 
 
\t document.querySelector('#app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app">Loading...</div>