2016-03-18 12 views
-1

次のReactjsコードがあります。インラインメニュー(要素のリスト)を生成します。特定の要素をクリックすると、コンソールに出力したいのですが、動作しません。ReactJS - 関数に引数を渡すときのエラー

import React from "react"; 


export default class GalleryHeader extends React.Component { 

    handleClick(cat) { 
    console.log(cat); 
    } 
    createItems(items) { 
    var output = []; 
    for(var i = 0; i < items.length; i++) 
     output.push(<li onClick={this.handleClick({items[i]})}>{items[i]}</li>); 
    return output; 
    } 
    render() { 

    return (
    <ul class="list-inline"> 
     {this.createItems(this.props.menuItems)} 
    </ul> 

    ); 
    } 
} 

私は以下のように関数の引数を削除すると、それが正常に動作します

{this.handleClick({items[i]})} 

関数を呼び出すにエラーがあるようです:

handleClick() { 
    console.log("test"); 
    } 
createItems(items) { 
    var output = []; 
    for(var i = 0; i < items.length; i++) 
    output.push(<li onClick={this.handleClick}>{items[i]}</li>); 

お知らせください。

+0

どのようなエラーが表示されますか? – WitVault

答えて

1

これはReactJSエラーではなく、単純なJSエラーです。

イベントリファレンスonClickに関数リファレンスを渡す必要があります。 <li onClick={this.handleClick({items[i]})}>{items[i]}</li>を実行すると、その関数を実行してその結果をイベントに渡しています。

正しい呼び出しは、あなたのthis範囲が変更されないし、あなたものparamsを受け取ることができる方法

<li onClick={this.handleClick.bind(this, items[i])}>{items[i]}</li>

ようなものになるだろう。ここでの違いは何だ

<li onClick={() => this.handleClick(items[i])}>{items[i]}</li>

別の解決策は、とES6矢印機能を使用することでしょうか?

さて、今度はthis.handleClick()を呼び出すファンクションリファレンス(() => {}が意味する)を渡しています。

ヒントJSX構文を使用しているときに代わりにclassclassNameを使用する必要があり、

まず、あなたの質問に関連していません。それは忘れやすい!

第2に、ループを使用して要素をレンダリングしているときはいつも、key属性を使用することをお勧めします。だからあなたの<li> sは次のようになります。

<li key={i} onClick={() => this.handleClick(items[i])}>{items[i]}</li>

この方法が反応のレンダリングを最適化し、あなたのブラウザのコンソールに警告/エラーを与えて停止することができます。あなたは内のキーに読んさらに取ることができます

は、ドキュメントに反応: FragmentMultiple ComponentsReconciliation

+2

バインドが高価になる可能性があります。矢印関数は同じ結果を返します: 'onClick = {()=> this.handleClick(items [i])}'。 [しかし、両方ともパフォーマンスのために落胆しています](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) –

+0

私はそれを私の答えに加えます。ありがとう! –

+0

ありがとうございました。 – Wasteland

1

あなたのコードでは、いくつかのミス

  1. があるあなたが機能するためにonClick参照を渡す必要があり、あなたはそれを呼び出し、結果はonClickに渡されますが、結果はundefinedonClick={ undefined })です。そのため、クリックが機能しません。あなたが使用することができます。この問題を解決するために.bind

    onClick={ this.handleClick.bind(this, items[i]) } 
    

    またはarrow function

    onClick={() => this.handleClick(items[i]) } 
    
  2. では、クラスを設定するように反応するあなたの代わりにclass

    <ul className="list-inline"> 
    

ExampleclassName属性を使用する必要があります属性

+0

classNameの修正をありがとうございます。 – Wasteland

関連する問題