Question

我的目标是使用状态存储的布尔值来更新下拉菜单以显示或保持隐藏。我编写了两个函数，“ toggleHander”（由click事件触发），该函数切换布尔状态，然后调用下一个函数-“ dropdownClickHandler”。 'dropdownClickHandler'根据保持在状态的布尔值的状态添加（或不显示）一个“显示” css类，从而更新下拉菜单。

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

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

任何帮助表示赞赏

仅供参考-我已经尝试将初始布尔状态更改为true，并且菜单可以正常工作。我只是不明白函数调用的顺序

此处的Codepen：https://codepen.io/k-i-r-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"} >

即使第一个函数调用第二个函数也不能以正确的顺序触发

1 个答案: