ハンドルの外をクリック

Question

setmenu関数（className = "menu"リスト）を呼び出すクリックがありますが、3回の異なるリターンでそれを繰り返す必要はありません。代わりに、私はそれを独自の関数/コンポーネントに入れて3回呼び出したいと思う。

私はそれを移動すると、クリックメニューはまだ設定されていませんが、まだ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>