react之Hook（二）—— useState对弹框的应用

Hook之useState 的点击按钮弹框

1. 引用组件
2. 使用useState创建初始值，作为弹窗的条件
3. 在组件中调用控制 useState 初始值的函数，并对其进行赋值

import React, { useState } from 'react'
import {  AtButton,AtDrawer } from 'taro-ui'

const [leftDrawerShow, caliBulletframe] = useState(false);

<View className='at-col at-col-6'>
          <AtButton type='primary' size='small' circle
           // 在点击触发组件中使用 caliBulletframe 函数将其中的初始值替换成true进而弹框
            onClick={() => caliBulletframe(show => show = true)
            }
          >添加
          </AtButton>
          <AtDrawer
            show={leftDrawerShow} // 控制显隐
            right
            mask
            width='260px'
            onClose={() => caliBulletframe(show => show = false)} // 关闭弹窗时触发（这里必须将初始值置为false，否则无法复用弹框）
          >
          </AtDrawer>
</View>