onClick 在重新渲染后第一次单击时不起作用

Question

const NavigationButtons = ({onBtnClicked, btnClass, label, route, btnAct}) => {
  return (
    <p
      className={`btn ${btnClass} ${btnAct}`}
      onClick={() => onBtnClicked(route)}>
      {label}
    </p>
  );
};

这是我的按钮组件，我将它作为 btns1 道具提供给另一个组件

 {!isSigned?btns1:windowPixel?btns1:null}

基本上，当 isSigned 为 false 时，会渲染 btns1。这里真的没有问题。当 isSigned 为 true 时，它​​会检查 windowPixel 是否为 true，App.js 通过测量当前窗口将其更改为 true 作为状态。除非我单击按钮，否则它会完美运行。调整 windowPixel 为 false 的窗口大小，然后在我第一次单击时，它不会触发 onClick。之后 onClick 再次起作用。

componentDidMount() {
  if (window.matchMedia(`(max-width: 990px)`).matches) {
    this.resizeWindow(true);
  }
  window.addEventListener("resize", () => this.resizeWindow(window.matchMedia(`(max-width: 990px)`).matches));
}

这是检查 windowPixel 的窗口大小。 chatScroll，用于在单击 btn1 时展开的面板，btnAct 仅用于在面板展开时更改按钮颜色的 css。现在，我已经把 click() 放在了，就像一个创可贴一样。

resizeWindow = (windowPixel) => {
  const {chatScroll, btn1Act} = initialState;

  if (windowPixel !== this.state.windowPixel) {
    if (windowPixel === false) {
      if (this.state.isSigned) {
        document.getElementById('btn1').click();
        this.setState({chatScroll, btn1Act});
      }
    }
    this.setState({windowPixel});
  }
};

Answer 1

原因很简单，兄弟，第一次单击您的对象或函数或变量是什么，只需在第一次单击时进行初始化，当您第二次单击时，它将按照您的代码工作。