Taro-ui <AtToast/>一直被其他地方的事件重复触发显示



  • a7a67264-2c01-478e-a12d-e9b38b119142-image.png
    我的大概逻辑是这样的如果密码输入错误 就显示错误的提示。 如果我触发两个onChange 事件任一一个<AtToast status='error/> 这个组件会显示 我这个组件上面加onClose事件 让errShow=false 还是没用, 只要触发那个onChange就会显示 我在onChange事件中并没有设置errShow的值。
    a967768b-f152-4d75-9543-d13a885b5b12-image.png 宁外提个小建议: 那个status属性建议做成isOpened那种可配置的



  • 此回复已被删除!


  • 建议像这样做一个封装,可以使其和全局组件差不多 调用方式为:在该页面的任何地方使用(包括组件中,不过在组件中需要在组件componentDidMount生命周期后使用)

    Taro.eventCenter.trigger('showLoading',msg)
    
    Taro.eventCenter.trigger('hideLoading')
    
    Taro.eventCenter.trigger('showSuccess',msg)
    
    Taro.eventCenter.trigger('showError',msg)
    

    import Taro, { Component } from '@tarojs/taro'
    import { AtToast } from "taro-ui"
    import { View } from '@tarojs/components'
    export default class Index extends Component {
    constructor(props) {
    super(props)
    this.showLoading = this.showLoading.bind(this)
    this.hidModal = this.hidModal.bind(this)
    this.showSuccess = this.showSuccess.bind(this)
    this.showError = this.showError.bind(this)
    this.state = {
    isOpened: false,
    type: 'success',
    text: '',
    timeVal: 2,
    icon: ''
    }
    }
    componentWillMount() {
    Taro.eventCenter.on('showLoading', this.showLoading)
    Taro.eventCenter.on('hideLoading', this.hidModal)
    Taro.eventCenter.on('showSuccess', this.showSuccess)
    Taro.eventCenter.on('showError', this.showError)
    }
    componentWillUnmount() {
    if (this.state.type === 'loading') {
    Taro.eventCenter.trigger('hideLoading')
    }
    Taro.eventCenter.off('showLoading', this.showLoading)
    Taro.eventCenter.off('hideLoading', this.hidModal)
    Taro.eventCenter.off('showSuccess', this.showSuccess)
    Taro.eventCenter.off('showError', this.showError)
    }
    showLoading(text = '加载中...', timeVal = 60) {
    this.setState({
    isOpened: true,
    type: 'loading',
    text,
    timeVal
    })
    }
    showSuccess(text = '', timeVal = 1.5) {
    this.setState({
    isOpened: true,
    type: 'success',
    text,
    timeVal
    })
    }
    showError(text = '', timeVal = 1.5) {
    this.setState({
    isOpened: true,
    type: 'error',
    text,
    timeVal
    })
    }
    hidModal() {
    this.setState({
    isOpened: false,
    })
    }
    render() {
    const { isOpened, type, text, timeVal } = this.state
    return (
    <View>
    <AtToast isOpened={isOpened} status={type} text={text} duration={timeVal * 1000} hasMask></AtToast>
    </View>
    )
    }
    }


登录后回复