即使第一个功能呼叫第二，功能也不以正确的顺序启动

Question

我的目的是使用存储在状态的布尔来更新下拉菜单以显示或隐藏。我写了两个功能，" togglehander"(由单击事件触发(，该功能可切换布尔态，然后调用下一个函数 - "下拉clickhandler"。"下拉列出"添加了一个'show'CSS类(或不(，取决于状态中保持的布尔的状态，因此更新了下拉菜单。

我的问题(我认为(是在第一个函数('drogdownClickHandler'(是在第一个('toggleHandler'(之前调用的 - 即使'toggleHandler'是直接由单击事件触发的，并且只能调用第二个函数SetState完成后。这会导致用户需要在下拉显示之前单击两次(而不是一次(。

我不确定这是否与SetState的提升或异步性有关？也许还有其他东西？

任何帮助

fyi-我尝试将初始布尔状态更改为true，并且菜单有效。我只是不了解函数调用的顺序

codepen在这里：https：//codepen.io/k-i-r-o-o-n/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"]
}   

Answer 1

正确的语法：

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