NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.55k stars 755 forks source link

drawer点击mask关闭时未自动重置show的状态 #456

Open KingGanZeng opened 5 years ago

KingGanZeng commented 5 years ago

Taro UI 版本信息

2.0.0-beta.2

问题描述

点击触发drawer并点击遮罩部分关闭后,如果再点击另一按钮触发setState,drawer会自动打开

复现步骤

1、点击按钮触发drawer 2、点击遮罩部分关闭drawer 3、点击页面另一按钮,该按钮触发setState 4、drawer自动打开

复现代码

// 布局部分
    <View className='fx-TabBar-wrap at-row at-row__justify--between'>
        <View className='at-col menu-button'>
          <View
            className='at-icon at-icon-list'
            onClick={this.showLeftBar}
          />
          <AtDrawer
            show={this.state.showLeftBar}
            mask
            items={['菜单1', '菜单2']}
            onItemClick={this.choosePage}
          >
          </AtDrawer>
        </View>
        <View className='at-col at-row at-row__align-content--center'>
          <View className='at-col add-button'>
            <View
              className='at-icon at-icon-close rotate-button'
              onClick={this.showRecordWay}
            /></View>
        </View>
        <View className='at-col diagram-button'>
          <View className='at-icon at-icon-equalizer' />
        </View>
        <MaskTabBar isOpened={this.state.isOpen} onOpenState={this.onChangeOpenState.bind(this)} />
      </View>

// 事件部分
/**
   * 显示侧边栏
   */
  showLeftBar() {
    this.setState({
      showLeftBar: true,
    })
  }
  /**
   * 侧边栏点击事件
   * @param index
   */
  choosePage(index) {
    console.log(index)
  }
  /**
   * 显示记账选项
   */
  showRecordWay() {
    this.setState({
      isOpen: true,
    })
  }

  /**
   * 接收子组件传值,关闭选项遮罩
   * @param openState
   */
  onChangeOpenState(openState) {
    this.setState({
      isOpen: openState,
    })
  }

报错信息

drawer自动打开

系统信息

👽 Taro v1.2.12

  Taro CLI 1.2.12 environment info:
    System:
      OS: macOS 10.14.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.6.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/async-await: ^1.2.8 => 1.2.8 
      @tarojs/components: 1.2.8 => 1.2.8 
      @tarojs/plugin-babel: 1.2.8 => 1.2.8 
      @tarojs/plugin-csso: 1.2.8 => 1.2.8 
      @tarojs/plugin-sass: 1.2.8 => 1.2.8 
      @tarojs/plugin-uglifyjs: 1.2.8 => 1.2.8 
      @tarojs/redux: ^1.2.8 => 1.2.8 
      @tarojs/redux-h5: ^1.2.8 => 1.2.8 
      @tarojs/router: 1.2.8 => 1.2.8 
      @tarojs/taro: 1.2.8 => 1.2.8 
      @tarojs/taro-alipay: 1.2.8 => 1.2.8 
      @tarojs/taro-h5: 1.2.8 => 1.2.8 
      @tarojs/taro-swan: 1.2.8 => 1.2.8 
      @tarojs/taro-tt: 1.2.8 => 1.2.8 
      @tarojs/taro-weapp: 1.2.8 => 1.2.8 
      @tarojs/webpack-runner: ^1.2.8 => 1.2.8 
      eslint-config-taro: 1.2.8 => 1.2.8 
      eslint-plugin-taro: 1.2.8 => 1.2.8 
      nervjs: ^1.3.9 => 1.3.9 

补充信息

需要手动调用onClose来在drawer关闭后修改show的状态,这点文档并没有说明

koppthe commented 5 years ago

嗯嗯,文档需要补充说明一下

felix9ia commented 4 years ago

……………… 原来是这样,那UI的很多受控属性并没有在外部指定受控后,真正被外部控制………………