React Native：将按钮绑定到 onPress 功能并随后禁用

Question

I have an infinity amount of buttons in my app due to I load items from my database and add a button to each item and the amount of items variates each time. This is the reason why I cannot use the state to this.

However, I want to disable the button after the button got pressed. So it should only be possible to press the button once. This is my (React Native Elements) button so far:

<Button
  onPress={() =>
    this.upvote(product.id, this.onPress.bind(this))
  }
  style={{
    width: Dimensions.get("window").width / 2
  }}
  buttonStyle={styles.productVotingButton}
  title={config.voteButton}
/>

And this here is my upvote function:

upvote(id, btn) {
    btn.setAttribute("disabled", "disabled");
  }

I have to give the upvote function the id of my item I want to upvote. So, it is necessary! However, I want to disable the button after the button got pressed ones. The problem I am facing here is I don't know how to pass the button component to the function so I can disable exactly the button which got pressed and not any other button...

Would appreciate any kind of help!

Answer 1

One option is to maintain a list of already-clicked product IDs in your state. Then you only need to pass the button ID to the handler - when the button is clicked check if the ID is in the list and either do nothing or perform the action and update the list of clicked IDs.

An advantage of doing it this way is that you can pre-fill that list with the products the user has already upvoted so they can't do it again by reloading the page (assuming such data is stored on your backend and is available over some API), and you can also use the list to disable buttons if the ID is already in the list. Something like...

const renderButton: (product, state) => (
    const { likedIds } = state;
    <Button
        onClick={() => this.upvote(product.id)}
        disabled={likedIds.indexOf(product.id) >= 0}
        ...
    />
);

const upvote = (productId) => {
    const { likedIds } = this.state;
    if (likedIds.indexOf(productId) >= 0) {
        return;
    } else {
        // whatever you need to do
        this.setState({
            likedIds: [...likedIds, productId]
        });
    }
};

I haven't tested this, but it should give you a rough idea.