У меня есть объект в 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

Если я щелкну x на glazed, я хочу, чтобы он был console.log person2, потому что это родительский объект glazed. Если я нажму x на chocolate sprinkles, я хочу, чтобы он был console.log person3.

Вот скрипка

Метод, который я пытаюсь выяснить, - это функция getPersonName. Как лучше всего разрешить пользователю нажимать на x и console.log соответствующий ключ объекта?

0
Iggy 19 Мар 2017 в 09:16

2 ответа

Лучший ответ

Вместо того, чтобы делать 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/

1
A. Lau 19 Мар 2017 в 07:06

Вам необходимо установить onClick для встроенной функции, которая вызывает getPersonName с соответствующим объектом person.

  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/

0
Tharaka Wijebandara 19 Мар 2017 в 06:47