「React Native」防重复点击

一、防快速重复点击。

export interface Props {
    onPress?: Function,
    activeOpacity?,
    style?
    editable?:boolean
}

export interface State {
    isDisable: boolean
}

export default class OnceTouch extends Component<Props, State>{

    timer
    constructor(props) {
        super(props);
        this.state = {
            isDisable: false,//是否被禁用,默认可点击
        };
    }

    static defaultProps = {
        editable: true,
    }

    componentWillUnMount() {
        this.timer && clearTimeout(this.timer)
    }

    dealPress = async () => {
        const { onPress } = this.props;
        onPress && onPress();
        await this.setState({ isDisable: true })//防重复点击
        this.timer = setTimeout(async () => {
            await this.setState({ isDisable: false })//1.5秒后可点击
        }, 1500)
    }

    render() {
        const { style,editable } = this.props
        return (
            <TouchableOpacity
                disabled={editable ? this.state.isDisable: true}
                activeOpacity={this.props.activeOpacity ? this.props.activeOpacity : 0.5}
                style={style ? style : {}}
                onPress={this.dealPress}>
                {this.props.children}
            </TouchableOpacity>
        )
    }
}

点击按钮后，立马将按钮设置为不可点击，按钮置灰，1.5秒后，重新可以点击。
二、防网络请求重复点击。

export interface Props {
    textStyle?: object,
    buttonText?: string,
    requestPromise: Function,
    dealResponse?: Function,
    children?: any,
    style?: {
        backgroundColor?: string
    },
    isUseStyle: boolean
}

export interface State {
    disabled?: boolean
}

export default class SubmitButton extends Component<Props, State> {

    static defaultProps = {
        buttonText: '确定',
        isUseStyle: true
    }

    constructor(props) {
        super(props)
        this.state = {
            disabled: false
        }
    }

    componentWillMount() {
        if (!(this.props.buttonText || this.props.children)) {
            console.error('buttonText或子元素不能为空！')
        }
    }

    handleClick = () => {
        //点击后，设置为不可点击
        this.setClickAbleStatus(true)
        console.log('SubmitButton clicked')
        const requestPromise = this.props.requestPromise
        if (requestPromise === null) {
            this.setClickAbleStatus(false)
            console.error('requestPromise不能为空！')
            return
        }
        let dealPromise = requestPromise()
        if (dealPromise === null || typeof dealPromise.then !== 'function') {
            console.log('传入的Promise不规范！')
            this.setClickAbleStatus(false)
            return
        }
        if (!this.props.dealResponse) {
            console.log('dealResponse为空！')
            return
        }
        dealPromise
            .then(res => {
                if (this.props.dealResponse) {
                    this.props.dealResponse(res)
                }
                this.setClickAbleStatus(false)
            })
            .catch((error) => {
                this.setClickAbleStatus(false)
            })
    }

    onClick = () => this.handleClick

    setClickAbleStatus(status: boolean) {
        this.setState({
            disabled: status
        })
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state !== nextState) {
            return true
        }
        return false
    }

    renderChildrenView(textStyle, buttonText) {
        return this.props.children
            ? this.props.children
            : <Text style={textStyle ? textStyle : styles.text_main}>{buttonText}</Text>
    }

    render() {
        const { textStyle, buttonText } = this.props
        return (
            <TouchableOpacity
                {...this.props}
                style={[this.props.isUseStyle && styles.button, { backgroundColor: '#FFA632' }, this.props.style, this.state.disabled ? { backgroundColor: 'gray' } : this.props.style]}
                onPress={this.onClick}
                activeOpacity={0.7}
                disabled={this.state.disabled}>
                {this.renderChildrenView(textStyle, buttonText)}
            </TouchableOpacity>
        )
    }
}

点击按钮，设置按钮不可点击，按钮置灰，只有当接口返回成功或者失败时，才重新可以点击按钮。