在 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

替换为&nbsp; &nbsp; &nbsp;<button disabled={!checkId || this.state.isDisabled}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isDisabled: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Get Pokemon&nbsp; &nbsp; &nbsp; &nbsp;</button>

Answer 2

以下条件似乎有问题：{!checkId || this.state.isDisabled === true ? (在我看来，条件应该改为：!checkId || !this.state.isDisabled，因为据我所知，每当单击按钮时，isDisabled状态都会设置为true将条件评估为真，因此，永远不会执行假情况。如果您需要执行一次， per&nbsp;match，您甚至可以将条件更改为：(!checkId && !this.state.isDisabled)希望这可以帮助