关于封装按钮组件,禁用按钮组件的问题。



  • 求助,我跟着视频中的封装按钮组件做到最后面的禁用按钮部分发现,禁用后按钮的样式效果有了,但是仍然会响应点击事件,我想问下,为什么禁用没有效果。代码完全跟视频是一样的。



  • 顺便问下,做视频的老师,你封装的按钮组件中禁用后,不会响应点击事件吗?

    import React, {
    Component,
    StyleSheet,
    Text,
    TouchableOpacity
    } from 'react-native';

    export default class Button extends Component {
    // 构造
    constructor(props) {
    super(props);
    // 初始状态
    this.state = {
    disabled: false
    };
    }

    onPress = () => {
    const {onPress} = this.props;
    onPress();
    };
    enable =()=>{
    this.setState({
    disabled:false
    })
    };
    disable =()=>{
    this.setState({
    disabled:true
    })
    };
    render() {
    const {text} = this.props;
    return (
    <TouchableOpacity
    disabled={this.state.disabled}
    style={[styles.button, this.state.disabled && styles.disabled]}
    onPress={this.onPress}
    >
    <Text style={styles.buttonText}>{text}</Text>
    </TouchableOpacity>
    );
    }
    }

    const styles = StyleSheet.create({
    button: {
    marginTop: 100,
    height: 40,
    width: 200,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    },
    buttonText: {
    fontSize: 16,
    color: 'white'
    },
    disabled: {
    backgroundColor: 'gray',
    }
    });


    /**

    import Button from './zyComponent/Button';

    class ScShop extends Component {
    fetchData =() =>{
    alert('点击按钮'); //--->禁用按钮后,点击还会执行
    this.refs.button.disable();
    this.timer = setTimeout(()=> {
    this.refs.button.enable();
    }, 5000);
    };

    componentDidUnMount() {
    this.timer && clearTimeout(this.timer);
    };

    render() {
    return (
    <View style={styles.container}>
    <Button ref="button" onPress={this.fetchData} text="提交" />
    </View>
    );
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },
    instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    }
    });

    AppRegistry.registerComponent('ScShop', () => ScShop);


  • administrators

    确认下你的rn版本,0.22开始才有disabled的属性



  • 问题解决了,的确是版本问题。感谢版主。


登录后回复