从映射的卡片禁用按钮 onClick

Question

我创建了一个卡片组件，我将思想卡片和onClick卡片映射到卡片，我想禁用我单击的卡片的按钮，我的逻辑是禁用所有按钮。这是我渲染 UI 的组件renderCard = () => {const getId = idconst 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 {

  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

Answer 2

将您希望禁用的按钮的 id/ref 存储在如下状态：

state: {

 disabledButton: ref,

}

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

handleOnCardClick(ref) {

  this.setState({ disabledButtonRef: ref });

}

在每个按钮中，useRef如果它是有状态组件，您可以使用钩子或创建 ref，或者您可以为每个按钮制作自己的 id，尽管第一个更可取。然后你通过 props 传递持有这个 ref 的状态，并在卡片的 disabled props 中比较它：

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