从映射的卡禁用按钮onClick

Question

[我创建了一个卡片组件，在其中将思想卡片和onClick映射到卡片，我想禁用我单击的卡片的按钮，根据我的逻辑，它禁用所有按钮。

这里是我呈现UI的组件

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

也许isDisable应该存在于poke的每个this.state.pokemon中。

希望有帮助。祝你好运。

Answer 2

将您要禁用的按钮的ID / ref存储在以下状态：

state: {
 disabledButton: ref,
}

然后在父级的回调中传递一个接收此引用的onClick处理程序：

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

在每个按钮中，可以使用钩子useRef或创建引用（如果它是有状态的组件），或者可以为每个按钮创建自己的ID，尽管最好使用第一个。然后，您通过道具传递持有此裁判的状态，并将其与卡的已禁用道具进行比较：

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