Как применить один и тот же метод несколько раз к различным элементам массива, используя ключ? - PullRequest
Новая
       3

Как применить один и тот же метод несколько раз к различным элементам массива, используя ключ?

0 голосов
/ 22 января 2020

Я работаю с галереей карт в реакции.

Каждая карта должна иметь свое собственное отдельное состояние и метод переключения, который в настоящее время определяется числом в конце функции, например, onDropdownToggle1.

Массив применяется с использованием this.state.cards.map((product, key) => ( ....

Есть ли способ вызывать каждую функцию по-разному, используя клавишу в названии функции? Как и прямое изменение имени функции onDropdownToggle + {key}? Или лучше как-нибудь взять ключ в качестве параметра?

Вот ссылка на мою песочницу, которая точно показывает, что происходит: https://codesandbox.io/s/weathered-worker-0y5vm

Буду очень признателен за любые предложения. Спасибо!

1 Ответ

0 голосов
/ 23 января 2020

Просто передайте ключ в качестве параметра. Либо сделайте это встроенным образом, как это: 

onToggle={(isDropdownOpen) => this.onDropdownToggle(key, isDropdownOpen)}

Или вы можете сделать это так: 

this.onDropdownToggle = key => isDropdownOpen => {
  ...
}

...

onToggle={this.onDropdownToggle(key)}

Затем вы можете использовать один обработчик для изменения каждой карты.

Вы должны будете использовать вычисленное имя свойства, когда настройки состояния 

this.setState({
  [key]: isDropdownOpen
});

Окончательный результат: 

// One toggle function that uses the key to update state
this.onDropdownToggle = (key, isDropdownOpen) => {
  this.setState({
    [key]: isDropdownOpen
  });
};

// One dropdown select function that uses the key to update state
this.onDropdownSelect = (key, event) => {
  this.setState({
    [key]: !this.state[key]
  });
};

...


<Dropdown
  isPlain
  position="right"
  onSelect={(e) => this.onDropdownSelect(key,e)}
  toggle={
   <KebabToggle 
     onToggle={(isDropdownOpen) => this.onDropdownToggle(key, isDropdownOpen)} />}
  isOpen={this.state[key]}
  dropdownItems={kebabDropdownItems}
/>

Вы также можете рассмотреть возможность использования item.name вместо ключа для перехода к функции. Но только если они всегда уникальны.

...