javascriptのオブジェクト値からキーを返す方法は？

Question

Reactにオブジェクトがあり、マップして相互作用させたいと思っています。ユーザーが要素の隣にある「X」ボタンをクリックすると、クリックされた要素のキーがconsole.logになります。ここで

はオブジェクトです：

var obj = { 
    person1: { 
    name: 'iggy', 
    superPower: 'awesomeness', 
    favDonut: 'chocolate' 
    }, 
    person2: { 
    name: 'iggy2', 
    superPower: 'stupendousness', 
    favDonut: 'glazed' 
    }, 
    person3: { 
    name: 'iggy3', 
    superPower: 'amazingness', 
    favDonut: 'chocolate sprinkles' 
    } 
}; 

反復は次のようになります。私はglazed上のxをクリックして、私はそれが親オブジェクトだから、それはperson2をCONSOLE.LOGしたい場合

X chocolate 
X glazed 
X chocolate sprinkles 

glazed。 chocolate sprinklesのxをクリックすると、console.log person3に送信します。ここで

はフィドルです：私は把握しようとしていますhttps://jsfiddle.net/iggyfiddle/b9rreoje/2/

方法がgetPersonName機能です。ユーザーがxとconsole.logをクリックするのを許可する最善の方法は何ですか？

Answer 1

むしろやってよりObject.valuesあなたは、対応するキーにアクセスできるようにあなたは、Object.keysをしたいでしょう。

getPersonName: function(person){ 
    console.log(person); 
    } 

const donutValues = Object.keys(obj).map((key, index) => <li key={index}><a href="#" onClick={() => this.getPersonName(key)}>X</a> {obj[key].favDonut} </li>); 

更新フィドル：https://jsfiddle.net/b9rreoje/3/

Answer 2

対応する人物オブジェクトでgetPersonNameを呼び出すインライン関数にonClickを設定する必要があります。

getPersonName: function(person){ 
    console.log(person); 
    }, 

    render(){ 
    const donutValues = Object.values(obj).map((person, index) => <li key={index}><a href="#" onClick={function(){this.getPersonName(person)}.bind(this)}>X</a> {person.favDonut} </li>); 
    return (
     <div> 
     Hello 
      <ul> 
      {donutValues} 
      </ul> 
      Give me person: {this.state.person} 
     </div> 
    ); 
    } 

はここで更新jsfiddleを探す： https://jsfiddle.net/8637u8qL/