时间戳

首页 > 解决方案 > 即使第一个函数调用第二个函数也没有按正确的顺序触发

javascript - 即使第一个函数调用第二个函数也没有按正确的顺序触发

问题描述

我的目标是使用存储在状态中的布尔值来更新下拉菜单以显示或保持隐藏。我写了两个函数，'toggleHander'（由点击事件触发）切换布尔状态，然后调用下一个函数 - 'dropdownClickHandler'。'dropdownClickHandler' 添加了一个 'show' css 类（或不添加），这取决于保存在 state 中的布尔值的状态，因此更新下拉菜单。

我的问题（我认为）是第二个函数（'dropdownClickHandler'）在第一个函数（'toggleHandler'）之前被调用 - 即使'toggleHandler'是由点击事件直接触发的，并且应该只在 setState 之后调用第二个函数完全的。这导致用户需要在下拉菜单显示之前单击两次（而不是一次）。

我不确定这是否与提升或 setState 的异步性质有关？或者也许是别的什么？

任何帮助表示赞赏

仅供参考 - 我尝试将初始布尔状态更改为 true 并且菜单有效。我只是不明白函数调用的顺序

Codepen 在这里：https ://codepen.io/kiron/pen/vwERzP

疑似违规代码：

toggleHandler = () => {
  this.setState(
    {addClass: !this.state.addClass},
    () => console.log('in toggle', this.state),                             
      this.dropdownClickHandler()
  ); 
}


dropdownClickHandler = () => {
  console.log('in drop', this.state);
  this.state.addClass === true ? boxClass = ["dropdownContent", "dropdownContent__show"] : boxClass = ["dropdownContent"]
}

标签： javascriptreactjs

解决方案

正确的语法：

toggleHandler = () => {
  this.setState(
    {addClass: !this.state.addClass},
    () => {
      console.log('in toggle', this.state),                             
      this.dropdownClickHandler()
    }
  ); 
}

但是（如评论中所述）dropdownClickHandler()将无法正常工作...

...您根本不需要它（基本条件渲染）：

render() {
  const boxClass = this.state.addClass ? "dropdownContent dropdownContent__show" : "dropdownContent"

  return (
    <div className={boxClass} >

甚至更简单

render() {
  return (
    <div className={"dropdownContent "+ this.state.addClass && "dropdownContent__show"} >

推荐阅读