onClick() 仅适用于第二次单击 - 反应

Question

我的按钮只有在双击后才起作用。我在上一篇文章中了解到，问题在于弹出的状态由所有按钮共享，因此如果您单击一个按钮，它会更改每个按钮的状态谁能帮我找到解决方案吗？function Challange() {  const [isPopped, setPop] = useState(false);  const pop = () => {    setPop(!isPopped);  };  return (    <>      {isPopped && <Dialog2 />}      <div className="challanges">        <h1 className="newchallenge">Choose New Challange</h1>        <button className="challangeBtn" onClick={pop}>          Eat Vegetarian (31days)        </button>        <button className="challangeBtn" onClick={pop}>          Take the bike to work (14days)        </button>        <button className="challangeBtn" onClick={pop}>          Recycle your plastic bottles (31days)        </button>        <button className="challangeBtn" onClick={pop}>          Use public transport to commute (31days)        </button>        <button className="challangeBtn" onClick={pop}>          Don't fly an airplane (365days)        </button>      </div>    </>  );}export default Challange;

Answer 1

问题是你的 pop 函数是像toggle. 它将从 true 切换到 false，从 false 切换到 true。

只需将其更改为 true 即可。

可能发生的情况是这样的：第一次单击打开对话框，然后关闭对话框但不要isPopped再次设置为 false。

Answer 2

如果您想在单击按钮时打开对话框，您可以更改 pop 函数以将状态设置为 true，如下所示：

const pop = () => {
    setPop(true);
};

每次单击按钮时，当前代码都会切换状态，因此第一次单击时将呈现 Dialog2，第二次单击时将再次隐藏。

附：

我认为你想要的是一种打开对话框的方法和一种关闭对话框的方法。

所以你可以做这样的事情：

function Challange() {

  const [isPopped, setPop] = useState(false);

  const openDialog = () => {

    setPop(true);

  };

  

  // renember to call this function when you want to close the dialog

  const closeDialog = () => {

    setPop(false);

  };

  return (

    <>

      {isPopped && <Dialog2 />}

      <div className="challanges">

        <h1 className="newchallenge">Choose New Challange</h1>

        <button className="challangeBtn" onClick={openDialog}>

          Eat Vegetarian (31days)

        </button>

        <button className="challangeBtn" onClick={openDialog}>

          Take the bike to work (14days)

        </button>

        <button className="challangeBtn" onClick={openDialog}>

          Recycle your plastic bottles (31days)

        </button>

        <button className="challangeBtn" onClick={openDialog}>

          Use public transport to commute (31days)

        </button>

        <button className="challangeBtn" onClick={openDialog}>

          Don't fly an airplane (365days)

        </button>

      </div>

    </>

  );

}

export default Challange;

Answer 3

在调用 setPop 的地方将 pop 函数更改为true，将确保该函数在第一次 onClick 上工作，而不是在第二次单击时切换到您想要的内容。

const pop = () => {
    setPop(true); 
};

Answer 4

您可以管理每种类型挑战的状态，并仅在选择一种挑战时切换弹出窗口。我认为一次只能选择一项挑战。

class Challenge extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            isPopped: false,

            selectedChallenge: ""

        }

    }

    selectChallenge = (challengeName) => {

        this.setState({

            selectedChallenge: challengeName,

        });

        this.togglePopped();

    }

    togglePopped = () => {

        this.setState({isPopped: !this.state.isPopped});

    }

    render() {

        return <div>

            {this.state.isPopped && <Dialog2 challenge={this.state.selectedChallenge} hideDialog={this.togglePopped}/>}

            <div className="challanges">

                <h1 className="newchallenge">Choose New Challange</h1>

                <button className="challangeBtn" onClick={() => {

                    this.selectChallenge('Eat Vegetarian (31days ')

                }}>

                    Eat Vegetarian (31days)

                </button>

                <button className="challangeBtn" onClick={() => {

                    this.selectChallenge('Take the bike to work (14days)')

                }}>

                    Take the bike to work (14days)

                </button>

                <button className="challangeBtn" onClick={() => {

                    this.selectChallenge('Recycle your plastic bottles (31days)')

                }}>

                    Recycle your plastic bottles (31days)

                </button>

                <button className="challangeBtn" onClick={() => {

                    this.selectChallenge('Use public transport to commute (31days)')

                }}>

                    Use public transport to commute (31days)

                </button>

                <button className="challangeBtn" onClick={() => {

                    this.selectChallenge("Don't fly an airplane (365days)")

                }}>

                    Don't fly an airplane (365days)

                </button>

            </div>

        </div>;

    }

}

class Dialog2 extends React.Component {

    constructor(props) {

        super(props);

    }

    render() {

        return <div class="dialog">

            <h2>Dialog2</h2>

            <div>{this.props.challenge}</div>

            <button onClick={this.props.hideDialog}>Hide</button>

        </div>

    }

}

ReactDOM.render(<Challenge/>, document.querySelector('#root'))

.dialog {

  width: 500px;

  background: red;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

这是功能组件版本

function Challenge (props) {

    const [isPopped, setIsPopped] = useState(false);

    const [selectedChallenge, setSelectedChallenge] = useState("");

    const selectChallenge = (challengeName) => {

        setSelectedChallenge(challengeName);

        togglePopped();

    }

    const togglePopped = () => {

        setIsPopped(!isPopped);

    }

    return <div>

        {isPopped && <Dialog2 challenge={selectedChallenge} hideDialog={togglePopped}/>}

        <div className="challanges">

            <h1 className="newchallenge">Choose New Challange</h1>

            <button className="challangeBtn" onClick={() => {

                selectChallenge('Eat Vegetarian (31days ')

            }}>

                Eat Vegetarian (31days)

            </button>

            <button className="challangeBtn" onClick={() => {

                selectChallenge('Take the bike to work (14days)')

            }}>

                Take the bike to work (14days)

            </button>

            <button className="challangeBtn" onClick={() => {

                selectChallenge('Recycle your plastic bottles (31days)')

            }}>

                Recycle your plastic bottles (31days)

            </button>

            <button className="challangeBtn" onClick={() => {

                selectChallenge('Use public transport to commute (31days)')

            }}>     

                Use public transport to commute (31days)

            </button>

            <button className="challangeBtn" onClick={() => {

                selectChallenge("Don't fly an airplane (365days)")

            }}> 

                Don't fly an airplane (365days)

            </button>

        </div>

    </div>;

}

function Dialog2() {

    return <div>

        <h2>Dialog2</h2>

        <div>{props.challenge}</div>

        <button onClick={props.hideDialog}>Hide</button>

    </div>

}