在 React 中单击时禁用按钮

Question

我制作了两个按钮组件，当我单击一个组件时，我想渲染另一个 onClick 以便能够禁用（因为它们看起来不一样）。    const match = id;    const checkId = this.state.pokemon.includes(match);            {!checkId || this.state.isDisabled === true ? (                        <button                            onClick={() =>                                this.setState({                                    isDisabled: true                                })                            }                        >                            Get Pokemon                        </button>                    ) : (                        <Button disabled/>                    )}                </div>问题是按钮禁用仅在我刷新时呈现，因为满足检查 ID 的条件但我在单击后直接切换到禁用按钮时遇到问题

Answer 1

替换为

     <button disabled={!checkId || this.state.isDisabled}

                        onClick={() =>

                            this.setState({

                                isDisabled: true

                            })

                        }

                    />

                        Get Pokemon

       </button>

Answer 2

以下条件似乎有问题：

{!checkId || this.state.isDisabled === true ? (

在我看来，条件应该改为：

!checkId || !this.state.isDisabled，因为据我所知，每当单击按钮时，isDisabled状态都会设置为true将条件评估为真，因此，永远不会执行假情况。

如果您需要执行一次， per match，您甚至可以将条件更改为：

(!checkId && !this.state.isDisabled)

希望这可以帮助