AtModal和AtFloatLayout在同一个页面中，显示AtFloatLayout后AtModal也错误的显示出来

[huangcs427]

相关平台

H5

复现仓库

https://github.com/huangcs427/taro_test.git 浏览器版本: Microsoft Edge 版本 113.0.1774.57 (正式版本) (64 位) 使用框架: React

复现步骤

import { Component, PropsWithChildren } from 'react'
import { View } from '@tarojs/components'
import { AtButton, AtFloatLayout, AtModal } from 'taro-ui'

import './index.less'

export default class Index extends Component<PropsWithChildren> {
  state = {
    isOpenedAtFloatLayout: false,
    isOpenedAtModal: false
  }

  setIsOpenedAtFloatLayout = (val:boolean) => {
    this.setState({
      isOpenedAtFloatLayout: val
    })
  }

  setIsOpenedAtModal = (val:boolean) => {
    this.setState({
      isOpenedAtModal: val
    })
  }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide() { }
  

  render () {
    return (
      <View className='index'>
        <View><br/></View>
        <AtButton type='primary' onClick={()=>this.setIsOpenedAtModal(true)}>AtModal</AtButton>
        <View><br/></View>
        <AtButton type='primary' circle onClick={()=>this.setIsOpenedAtFloatLayout(true)}>AtFloatLayout</AtButton>
        <AtFloatLayout isOpened={this.state.isOpenedAtFloatLayout} onClose={()=>this.setIsOpenedAtFloatLayout(false)}>
          这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
          随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
        </AtFloatLayout>
        <AtModal
          isOpened={this.state.isOpenedAtModal}
          cancelText='取消'
          confirmText='确认'
          onCancel={()=>this.setIsOpenedAtModal(false)}
          onConfirm={()=>this.setIsOpenedAtModal(true)}
          content='欢迎加入京东凹凸实验室<br/>欢迎加入京东凹凸实验室'
        />
      </View>
    )
  }
}

期望结果

AtFloatLayout和AtModal的显示互不影响

实际结果

先显示AtButton，再显示AtFloatLayout，AtFloatLayout也一并显示出来

环境信息

👽 Taro v3.6.8


  Taro CLI 3.6.8 environment info:
    System:
      OS: Linux 5.15 Deepin 20.9 20.9
      Shell: 5.0.3 - /bin/bash
    Binaries:
      Node: 16.14.0 - ~/.config/nvm/versions/node/v16.14.0/bin/node
      npm: 8.3.1 - ~/.config/nvm/versions/node/v16.14.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.8 => 3.6.8 
      @tarojs/components: 3.6.8 => 3.6.8 
      @tarojs/helper: 3.6.8 => 3.6.8 
      @tarojs/plugin-framework-react: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-alipay: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-h5: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-jd: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-qq: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-swan: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-tt: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-weapp: 3.6.8 => 3.6.8 
      @tarojs/react: 3.6.8 => 3.6.8 
      @tarojs/runtime: 3.6.8 => 3.6.8 
      @tarojs/shared: 3.6.8 => 3.6.8 
      @tarojs/taro: 3.6.8 => 3.6.8 
      @tarojs/taro-loader: 3.6.8 => 3.6.8 
      @tarojs/webpack5-runner: 3.6.8 => 3.6.8 
      babel-preset-taro: 3.6.8 => 3.6.8 
      eslint-config-taro: 3.6.8 => 3.6.8 
      react: ^18.0.0 => 18.2.0 
      taro-ui: ^3.1.0-beta.2 => 3.1.0-beta.5 

---

补充信息

官方新创建的项目，选了模板是Taro UI，未进行过其他修改，

[huangcs427]

setIsOpenedAtFloatLayout = (val:boolean) => {
    this.setState({
      isOpenedAtFloatLayout: val
    })
}

每次调用setIsOpenedAtFloatLayout函数的时候，在this.setState中加上isOpenedAtModal: false可以临时解决该问题

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~