从映射的卡片禁用按钮 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。希望有帮助。祝你好运。我假设这两个函数都是组件的方法。如果是真的。我认为你需要这样的组件。import React from 'react'interface State {&nbsp; pokemon: number[],&nbsp; id: number,&nbsp; disables: number[]}class View extends React.Component<{}, State>{&nbsp; constructor(props: any) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; pokemon: [],&nbsp; &nbsp; &nbsp; id: Number.NaN,&nbsp; &nbsp; &nbsp; disables: []&nbsp; &nbsp; }&nbsp; }&nbsp; renderCard&nbsp; &nbsp;= () => {&nbsp; &nbsp; const getId = this.state.id&nbsp; &nbsp; const newPoke = this.state.pokemon.includes(getId)&nbsp; &nbsp; const disabled = newPoke || this.state.disables.includes(getId)&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <button disabled={disabled}></button>&nbsp; &nbsp; )&nbsp; }&nbsp; renderPokemon&nbsp; = () => {&nbsp; }&nbsp; render() {&nbsp; &nbsp; return this.renderCard()&nbsp; }}export default View

Answer 2

将您希望禁用的按钮的 id/ref 存储在如下状态：state: {&nbsp;disabledButton: ref,}然后在父级的回调中传递一个接收此引用的 onClick 处理程序：handleOnCardClick(ref) {&nbsp; this.setState({ disabledButtonRef: ref });}在每个按钮中，useRef如果它是有状态组件，您可以使用钩子或创建 ref，或者您可以为每个按钮制作自己的 id，尽管第一个更可取。然后你通过 props 传递持有这个 ref 的状态，并在卡片的 disabled props 中比较它：<Card disabled={disabledButtonRefFromProps === thisCardRef} />