Question

由于我从数据库中加载项目并向每个项目中添加一个按钮，因此项目中的按钮数量无穷大，并且每次的项目数量都有所不同。这就是为什么我不能对此使用状态的原因。

但是，我想在按下按钮后禁用该按钮。因此，只能按下一次按钮。到目前为止，这是我的（React Native Elements）按钮：

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

这是我最喜欢的功能：

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

我必须给upvote函数一个我要更新的商品的ID。因此，有必要！但是，我想在按钮被按下后禁用该按钮。我在这里面临的问题是我不知道如何将按钮组件传递给函数，因此我可以完全禁用被按下的按钮，而不能禁用其他任何按钮...

将感谢您的任何帮助！

Answer 1

一种选择是维护您所在状态下已单击的产品ID的列表。然后，您只需要将按钮ID传递给处理程序-单击按钮时，请检查ID是否在列表中，或者不执行任何操作或执行操作并更新单击的ID列表。

这样做的好处是，您可以用用户已经赞过的产品预先填充该列表，这样他们就可以通过重新加载页面来再次做到这一点（假设此类数据存储在您的后端并且（可通过某些API获得），并且如果ID已在列表中，您还可以使用该列表禁用按钮。像...

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

我还没有测试过，但这应该给你一个大概的想法。

React Native：将按钮绑定到onPress函数并随后禁用

1 个答案: