Отключить кнопку на Нажать с сопоставленной карты

Question

Я создал компонент карты, где я сопоставляю карточку мысли и onClick на карточку. Я хотел бы отключить кнопку карты, на которую нажал, по моей логике - отключить все кнопки.

Вот мой компонент, в котором я отображаю пользовательский интерфейс

renderCard = () => {
const getId = id
const newPoke = pokemon.includes(getId)

  <button disabled={newPoke || this.state.isDisabled}/>
}

Все компоненты являются картой, но я удалил некоторый код

, а вот мой метод визуализации

renderPokemon = () => {
return this.state.pokemon.map(poke => {
return this.renderCard(poke)
  })
}

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

Состояние, когда я отключен, изменяется при нажатии на запрос на публикацию

Answer 1

Сохраните id / ref кнопки, которую вы хотите отключить, в следующем состоянии:

state: {
 disabledButton: ref,
}

Затем при обратном вызове родительского элемента передайте обработчик onClick, который получает этот ref:

handleOnCardClick(ref) {
  this.setState({ disabledButtonRef: ref });
}

В каждой кнопке вы можете использовать хук useRef или создать ссылку, если она является компонентом с состоянием, или вы можете сделать свои собственные идентификаторы для каждой кнопки, хотя первая из них предпочтительнее. Затем вы передаете через реквизит состояние, в котором находится этот реф, и сравниваете его в отключенной реквизите карты:

<Card disabled={disabledButtonRefFromProps === thisCardRef} />

Answer 2

Может быть, isDisable должен существовать в каждом poke из this.state.pokemon.

Надежда, которая помогает. Удачи.

Я предполагаю, что обе функции являются методами компонента. Если это правдаЯ думаю, что вам нужен такой компонент.

import React from 'react'

interface State {
  pokemon: number[],
  id: number,
  disables: number[]
}
class View extends React.Component<{}, State>{
  constructor(props: any) {
    super(props)
    this.state = {
      pokemon: [],
      id: Number.NaN,
      disables: []
    }
  }

  renderCard   = () => {
    const getId = this.state.id
    const newPoke = this.state.pokemon.includes(getId)
    const disabled = newPoke || this.state.disables.includes(getId)
    return (
      <button disabled={disabled}></button>
    )
  }
  renderPokemon  = () => {

  }

  render() {
    return this.renderCard()
  }
}

export default View