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

以下情况似乎是错误的：

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

我认为条件应更改为：

!checkId || !this.state.isDisabled，因为从我看到的情况来看，每当单击按钮时，isDisabled的状态都将设置为true，从而将条件评估为真，因此永远不会执行虚假的情况

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

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

希望这会有所帮助

Answer 2

替换为

     <button disabled={!checkId || this.state.isDisabled}
                        onClick={() =>
                            this.setState({
                                isDisabled: true
                            })
                        }
                    />
                        Get Pokemon
       </button>

在React中单击时禁用按钮

2 个答案: