javascript - 如何从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'
  }
};

迭代看起来像这样:

X chocolate
X glazed
X chocolate sprinkles

如果我单击 glazed 上的 x，我希望将其记录到 console.log person2，因为它是 glazed 的父对象。如果我点击 chocolate spills 上的 x，我希望它到 console.log person3。

这是 fiddle :https://jsfiddle.net/iggyfiddle/b9rreoje/2/

我试图找出的方法是 getPersonName 函数。允许用户单击 x 和 console.log 相关对象键的最佳方法是什么？

Answer 1

您需要执行Object.keys，而不是执行Object.values，这样您就可以访问相应的 key 。

  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>);

更新了 fiddle :https://jsfiddle.net/b9rreoje/3/