取り扱いクリック

Question

背景

こんにちは、私はC＃とVB.netで非常に快適ですが、私はJavaScriptに新たなんだと、現在のようによく反応学ぶしようとしています。私は、学習目的のための簡単なチケット購入アプリケーションに取り組んでいます。私は1日にAngularでこのアプリケーションを作成することができましたが、Reactはもっと難しいと証明されています。 ReactでJSファンダメンタルズを学ぶ必要があるのは明らかですが、Angularを拾うための知識は必要ないと感じています。私が作成してスピンアップ

問題

は、Appプロジェクトを反応し、（私が工夫で最高の学び）それをいじり始めました。私は現在、各出展者（劇場連鎖）のボタンを生成することができます。これらのボタンは動的に生成されます。なぜなら、最終的には、出展者の数がわからないからです。グーグルとスタック溢れたくさんの後、ここで私は（ご容赦下さい任意のnoobの構文/フォーマット）を作ってみたコードです：

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class TicketOrder extends Component { 
    constructor() { 
    super(); 

    this.handleClick = this.handleClick.bind(this); 

    // List of Exhibitors 
    this.exhibList = { 
     TestA  : "abc", 
     TestB  : "bcd", 
     TestC  : "cde" 
    }; 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Ticketz</h2> 
      <p id="userGuide">Hello. Please select an Exhibitor:<br/><br/> </p> 
     </div> 
     <br/> 
     <div> 
     { 
      Object.keys(this.exhibList).map(function(key) { 
      return (<p><button className="button" onClick={key => this.handleClick}>{key}</button></p>); 
      }) 
     } 
     </div> 
    </div> 
    ); 
    } 

    handleClick() { 
    console.log("Clicked!"); 
    }; 
} 

export default TicketOrder; 

、私はいくつかの基本的なミスを作ってるんだと推定し、私は私にはない認めますまだリアクトの概念を完全に把握しているので、私の上で簡単に行ってください！私がしようとしているエラーは、 "Uncaught TypeError：未定義のhandleClick 'プロパティを読み取れません"ということです。上記のコードの多くのバリエーションを無駄に試しました。誰かが私のコード/コンセプトに間違っていることを教えてくれるほど親切でしょうか？

この問題が解決すると、handleClickを知っているまだ概念化できていない根本的な問題が残っていますボタンが押されたを知っています。たとえば、ユーザーがTestA、console.log（ "abc"）を押したとします。結局、JSとReactについてもっと理解したら、ボタンを押したときにhandleClickのコンポーネントの状態を変更すると思います。どのようにこれを達成するための任意の洞察は、非常に高く評価されるだろう。

ありがとうございます！ チャーリー

Answer 1

「これは」あなたがアクセスしようとしているが、アクセスできません。これを避けるには、矢印関数の構文を使用します。 また、マップ関数はあなたのキーの配列を反復しているので、handleClick関数にこのキーを引数として渡すだけです。 あなたのマッピングは次のように希望：矢印機能で

{ 
    Object.keys(this.exhibList).map((item, index) => { 
     return (<p><button key={index} className="button" onClick={() => this.handleClick(item)}>{item}</button></p>); 
    }) 
} 

を{}、「これは」あなたは（別名TicketOrder）にアクセスしたいものになります。また、マップする要素に一意のキープロパティを与えることを忘れないでください（前の例ではインデックスを置いています）。これは、Reactアルゴリズムがどの要素が変更されたかを知るのに役立ちます。 CF here

あなたhandleClickは次のようになります。

handleClick = (message) => { 
    console.log("Clicked!", message); 
}; 

あなたは別のキーが引数として渡され、ユーザーがクリックしたボタンに応じて表示されていることがわかります。

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class TicketOrder extends Component { 
    // Drop the constructor you don't need it anymore, especially with Create React App 
    exhibList = { 
    TestA  : "abc", 
    TestB  : "bcd", 
    TestC  : "cde", 
    } 

    handleClick = (key) => { 
    console.log("Clicked!", key); 
    }; 

    render() { 
    return (
     <div className="App"> 
      <div className="App-header"> 
       <img src={logo} className="App-logo" alt="logo" /> 
       <h2>Ticketz</h2> 
       <p id="userGuide">Hello. Please select an Exhibitor:<br/><br/> </p> 
      </div> 
      <br/> 
      <div> 
      { 
       Object.keys(this.exhibList).map((item, index) => { 
        return (<p><button key={index} className="button" onClick={() => this.handleClick(item)}>{item}</button></p>); 
       }) 
      } 
      </div> 
    </div> 
    ); 
    } 
} 

export default TicketOrder; 

Answer 2

これまでご onClick変更

：

onClick={() => this.handleClick(key)} 

handleClick(key) { 
    console.log('Clicked!', key) 
} 

、あなたがイベントをしたい場合：このようなあなたのコードを変更

handleClick(ctx) { 
    console.log(ctx, "Clicked!"); 
} 

Answer 3

：に

onClick={this.handleClick.bind(this, key)} 

とあなたの​​を：

onClick={event => this.handleClick(event, key)} 

handleClick(event, key) { 
    console.log('Clicked!', event, key) 
} 

希望に役立ちます！ :)あなたのマップ機能がない考えを持っていない

Answer 4

について内でこの、それゆえは未定義のプロパティ「handleClick」」を読み取ることができません。それはあなたがthisが未定義であるという場合には、undefined.handleClickを起動しようとしていることを意味します。

あなたは箱から出してバインドのthis機能に脂肪矢印機能() => {}を使用することができます。あなたのマップ機能が

map((key, index) => { 
    return (
    <p key={index}> 
    <button 
     className="button" 
     onClick={() => this.handleClick(key)}>{key} 
    </button> 
    </p>); 
}) 

に変更するそうするためにもインデックス引数を注意してくださいイテレータ内の各子には固有のキーが必要です。

次に、あなたのhandleClick：あなたは関数スコープにいるので

handleClick(key){ 
    console.log('Clicked',key) 
}