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 一样实现的。它会从真到假，从假到真。

就像@otacilio 说的，把它改成true。

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

Answer 2

如果您想在单击按钮时打开对话框，可以更改弹出功能将状态设置为 true，使其如下所示：

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

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

PS：

我看到了你的last post，我认为你想要的是一种打开对话框和关闭对话框的方法。

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

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>
}