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&nbsp;pop&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;setPop(true);&nbsp; };

Answer 4

您可以管理每种类型挑战的状态，并仅在选择一种挑战时切换弹出窗口。我认为一次只能选择一项挑战。class Challenge extends React.Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isPopped: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedChallenge: ""&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; selectChallenge = (challengeName) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedChallenge: challengeName,&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; this.togglePopped();&nbsp; &nbsp; }&nbsp; &nbsp; togglePopped = () => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({isPopped: !this.state.isPopped});&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.isPopped && <Dialog2 challenge={this.state.selectedChallenge} hideDialog={this.togglePopped}/>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="challanges">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="newchallenge">Choose New Challange</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectChallenge('Eat Vegetarian (31days ')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Eat Vegetarian (31days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectChallenge('Take the bike to work (14days)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Take the bike to work (14days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectChallenge('Recycle your plastic bottles (31days)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Recycle your plastic bottles (31days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectChallenge('Use public transport to commute (31days)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Use public transport to commute (31days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectChallenge("Don't fly an airplane (365days)")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Don't fly an airplane (365days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>;&nbsp; &nbsp; }}class Dialog2 extends React.Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return <div class="dialog">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Dialog2</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{this.props.challenge}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.props.hideDialog}>Hide</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; }}ReactDOM.render(<Challenge/>, document.querySelector('#root')).dialog {&nbsp; width: 500px;&nbsp; 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) {&nbsp; &nbsp; const [isPopped, setIsPopped] = useState(false);&nbsp; &nbsp; const [selectedChallenge, setSelectedChallenge] = useState("");&nbsp; &nbsp; const selectChallenge = (challengeName) => {&nbsp; &nbsp; &nbsp; &nbsp; setSelectedChallenge(challengeName);&nbsp; &nbsp; &nbsp; &nbsp; togglePopped();&nbsp; &nbsp; }&nbsp; &nbsp; const togglePopped = () => {&nbsp; &nbsp; &nbsp; &nbsp; setIsPopped(!isPopped);&nbsp; &nbsp; }&nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; {isPopped && <Dialog2 challenge={selectedChallenge} hideDialog={togglePopped}/>}&nbsp; &nbsp; &nbsp; &nbsp; <div className="challanges">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="newchallenge">Choose New Challange</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectChallenge('Eat Vegetarian (31days ')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Eat Vegetarian (31days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectChallenge('Take the bike to work (14days)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Take the bike to work (14days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectChallenge('Recycle your plastic bottles (31days)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Recycle your plastic bottles (31days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectChallenge('Use public transport to commute (31days)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Use public transport to commute (31days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="challangeBtn" onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectChallenge("Don't fly an airplane (365days)")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Don't fly an airplane (365days)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>;}function Dialog2() {&nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Dialog2</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div>{props.challenge}</div>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={props.hideDialog}>Hide</button>&nbsp; &nbsp; </div>}