AtModal模态框属性isOpened无效

[jimmy2012]

问题描述 默认创建项目添加taro-ui后，直接在页面使用AtModal，初始设置isOpened为false，但打开微信开发者工具预览模态框直接有显示内容，百思不解！

代码： import Taro, { Component } from '@tarojs/taro' import { View, Button } from '@tarojs/components' import './index.scss' import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton, } from 'taro-ui'

export default class Index extends Component {

config = { navigationBarTitleText: '首页' }

state = { isModalOpened: false, }

onClickAdd = () => { this.setState({ isModalOpened: true }) }

closeModal = (type, msg) => { this.setState({ isModalOpened: false }) console.log(msg) }

render () { console.log(this.state.isModalOpened)

return (
  <View className='index'>
    <Button type='primary' onClick={this.onClickAdd}>打开窗口</Button>
    <AtModal
      isOpened={this.state.isModalOpened}
      onClose={this.closeModal.bind(this, 1, 'Modal被关闭了')}
    >
      <AtModalHeader>模态窗口</AtModalHeader>
      <AtModalContent>
        这里是正文内容，欢迎加入京东凹凸实验室
        这里是正文内容，欢迎加入京东凹凸实验室
        这里是正文内容，欢迎加入京东凹凸实验室
      </AtModalContent>
      <AtModalAction>
        <Button type='primary' onClick={this.closeModal.bind(this, 1, '点击了取消')}>
          取消
        </Button>
        <Button type='primary' onClick={this.closeModal.bind(this, 1, '点击了确定')}>
          确定
        </Button>
      </AtModalAction>
    </AtModal>
  </View>
)

} }

[taro-ui-bot[bot]]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[SzHeJason]

附加上 Taro 和 Taro-ui 的版本

[jimmy2012]

"dependencies": { "@tarojs/components": "1.3.5", "@tarojs/router": "1.3.5", "@tarojs/taro": "1.3.5", "@tarojs/taro-alipay": "1.3.5", "@tarojs/taro-h5": "1.3.5", "@tarojs/taro-swan": "1.3.5", "@tarojs/taro-tt": "1.3.5", "@tarojs/taro-weapp": "1.3.5", "nerv-devtools": "^1.4.0", "nervjs": "^1.4.0", "taro-ui": "^2.2.1" }, "devDependencies": { "@types/react": "^16.4.6", "@types/webpack-env": "^1.13.6", "@tarojs/plugin-babel": "1.3.5", "@tarojs/plugin-csso": "1.3.5", "@tarojs/plugin-sass": "1.3.5", "@tarojs/plugin-uglifyjs": "1.3.5", "@tarojs/webpack-runner": "1.3.5", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-jsx-stylesheet": "^0.6.5", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-eslint": "^8.2.3", "eslint": "^5.16.0", "eslint-config-taro": "1.3.5", "eslint-plugin-react": "^7.8.2", "eslint-plugin-import": "^2.12.0", "stylelint": "9.3.0", "stylelint-config-taro-rn": "1.3.5", "stylelint-taro-rn": "1.3.5", "eslint-plugin-taro": "1.3.5" }

[taro-ui-bot[bot]]

CC @SzHeJason

[qianlongdoit]

我也碰到了这样的问题，isOpened属性无效啊，没法控制是否显示
而且比较奇怪的是文档里面给的类型居然是 string ？实际用string类型会报错

[liuyaochen04]

我也有这个问题，难道这个问题不算问题吗？？？

[lawushanshan]

这个问题我也遇到了，Taroui版本号 2.2.1。 目前我找到的解决方案如下： 经测试发现 ，isOnpend的属性通过从props中获取值，可以实现窗口的关闭与否，所以就将TaroModal组件在封装了一次，然后通过属性传值，就可以控制窗口的关闭,封装程度自己调整；

[flytrap]

偶尔也会有效一下

[plainnany]

isOpened的状态竟然是通过css控制的。。。 没生效的看看是不是scss文件没引入导致的

import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

[YulinLiu1998]

不管用呀。