reactjs – 在react-native中oneClick后禁用TouchableOpacity按

发布时间：2020-12-15 09:32:21 所属栏目：百科来源：网络整理

导读：export default decreasePrice extends React.Component { constructor(props) { super(props); this.state = { price : 50000 } }; _handlePrice = () = { this.setState({price : this.state.price - 2000}); }render() { return( div TouchableOpacity on

export default decreasePrice extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    price : 50000
   }
 };
 _handlePrice = () => {
     this.setState({price : this.state.price - 2000});
 }
render() { 
    return( <div>
        <TouchableOpacity onPress={this._handlePrice} >
            <Text> Offer for you </Text>
        </TouchableOpacity>
        )
 }}

所以,我想要的是,一旦价格下降,我想在一次点击后禁用我的按钮,这样用户就不能一次又一次地降低价格.我想在oneCLick之后禁用该按钮.

解决方法

你可以使用变量作为标志,例如this.pressed：

export default decreasePrice extends React.Component {
    constructor(props) {
        super(props);
        this.pressed = false;
        this.state = {
          price : 50000
      }
  };
    _handlePrice = () => {
        if (!this.pressed){
           this.pressed = true;
           this.setState({price : this.state.price - 2000});
        }
    }
    render() { 
        return( 
            <TouchableOpacity onPress={this._handlePrice} >
                <Text> Offer for you </Text>
            </TouchableOpacity>
        )
    }
}

按这种方式按钮只工作一次.
您可以按下后删除TouchableOpacity：

render() { 
    if (!this.pressed)
        return(
            <TouchableOpacity onPress={this._handlePrice} >
                <Text> Offer for you </Text>
            </TouchableOpacity>
        )
    else
        return(
            <View>
                <Text> Offer for you </Text>
            </View>
        )
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!