javascript - 唯一地设置元素上的属性

Question

我正在制作一个反应原生的应用程序。在我的应用程序中，我正在获取一些 json 并使用循环，我迭代 json 数组，然后在循环中创建视图。现在有一个问题，我在循环中创建的视图中使用了onpress()函数。现在有一个问题，例如我有 3 个视图，每个视图都有一个按钮。现在，当我按下按钮时，我想替换按钮单击时的图像，所有 3 个视图的图像都已更改，但我只想更改单击按钮的图像

const imagesPath = {
  minus: require('./heartFill.png'),
  plus: require('./heart.png')
}

  LikeImage = () =>
  {
    this.setState(state => ({ open: !state.open }));

    const ref=this.heading.current.props;
    const refpic=this.pic.current;
     alert(ref);
 }

    const imageName = this.getImageName();

let data = [];
const rendercard = () => {
  for (let item in this.state.jsons) {
    let Image_Http_URL = { uri: this.state.jsons[item].url };
    const piced = this.state.jsons[item].url;
    data.push(
      <Card
        key={generateKey(piced)}
        style={{
          elevation: 7,
          borderBottomEndRadius: 20,
          borderBottomStartRadius: 20,
          borderTopEndRadius: 20,
          borderTopStartRadius: 20,
          marginBottom: 20,
          backgroundColor: "#000000",
          height: 350,
          padding: 0
        }}
      >
        <Card.Content
          style={{
            paddingLeft: 0,
            paddingRight: 0,
            paddingTop: 0,
            paddingBottom: 0,
            borderTopEndRadius: 20,
            borderTopStartRadius: 20
          }}
        >
          <Image
            ref={this.pic}
            style={{
              borderTopLeftRadius: 30,
              borderTopRightRadius: 30,
              alignItems: "center",
              justifyContent: "center",
              width: "100%",
              height: "85%"
            }}
            resizeMode="stretch"
            source={Image_Http_URL}
          ></Image>
          <Text
            ref={this.heading}
            style={{
              fontSize: 25,
              fontWeight: "bold",
              color: "white",
              paddingStart: 10,
              paddingEnd: 10,
              position: "absolute",
              bottom: 150
            }}
          >
            “ {this.state.jsons[item].quotes} ”
          </Text>

          <View
            style={{
              alignItems: "center",
              justifyContent: "space-between",
              flexDirection: "row",
              backgroundColor: "white",
              width: "100%",
              height: "15%",
              borderBottomEndRadius: 20,
              borderBottomStartRadius: 20
            }}
          >
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <ImageBackground
                onPress={this.LikeImage}
                style={{ width: 30, height: 30, marginStart: 20 }}
                source={imagesPath[imageName]}
              ></ImageBackground>
              <Text
                onPress={this.LikeImage}
                style={{ fontSize: 15, fontWeight: "bold" }}
              >
                {" "}
                Like
              </Text>
            </View>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Image
                style={{ width: 30, height: 30 }}
                source={require("./download.png")}
              ></Image>
              <Text style={{ fontSize: 15, fontWeight: "bold" }}> Save</Text>
            </View>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Image
                style={{ width: 30, height: 30 }}
                source={require("./share.png")}
              ></Image>
              <Text style={{ fontSize: 15, fontWeight: "bold", marginEnd: 20 }}>
                {" "}
                Share
              </Text>
            </View>
          </View>
        </Card.Content>
      </Card>
    );
  }
  return data;
};

标签： javascriptreactjsreact-native