CODEWITHSUNDEEP
reactjsreact-native
Abhishek Kumar Pandey
Abhishek Kumar Pandey

Reputation: 457

Disable TouchableOpacity button after oneClick in react-native?

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>
        )
 }}

So , what I want is, I want to disable my button after oneclick once price is decresed , so that user can not decrese price again and again. I want to disable the button after oneCLick.

Upvotes: 4

Views: 10914

Answers (2)

A. Goodale
A. Goodale

Reputation: 1348

If you don't mind bringing in a library like underscore or lodash, you can wrap _handlePrice in _.once(). It removes the need for a separate piece of state inside the component instance.

constructor(props) {
  super(props);
  this.state = { price: 50000 };
  this._handlePrice = _.once(this._handlePrice.bind(this));
}

Upvotes: 4

Meysam Izadmehr
Meysam Izadmehr

Reputation: 3262

you can use a variable as flag, for example 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>
        )
    }
}

in this way button just working for one time. you alse can remove TouchableOpacity after press:

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

Upvotes: 7

Related Questions