Taro-ui <AtToast/>一直被其他地方的事件重复触发显示
-
我的大概逻辑是这样的如果密码输入错误 就显示错误的提示。 如果我触发两个onChange 事件任一一个<AtToast status='error/> 这个组件会显示 我这个组件上面加onClose事件 让errShow=false 还是没用， 只要触发那个onChange就会显示 我在onChange事件中并没有设置errShow的值。
宁外提个小建议： 那个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>
)
}
}