處理單擊返回外部

Question

我有一個點擊，調用setmenu函數（在className =「菜單」列表中），但我不想在我的3個不同的回報中重複它。相反，我想把它放到它自己的函數/組件中，並調用它3次。

但是，當我移動它的點擊無法找到setmenu了，儘管我仍然有this.setmenu = this.setmenu.bind（this）;在構造函數中？

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

工作例如：https://jsfiddle.net/wostex/4wcdL6dw/3/

只是通過你的函數作爲道具。

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

約@wostex answer

• 一些變化讓來自href讀取其他參數屬性，而不是調用句柄與其他參數
• 事件應該由事件API，而不是舊時代建築被阻止href="javascript:void(0)"
• 鏈接容器可以支持儘可能多的內部鏈接

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>