如何在数组中添加多个复选框并在条件库中添加值- react native

hrysbysz 于 2023-05-01 发布在 React

关注(0)|答案(1)|浏览(93)

我在我的应用程序中实现了复选框，这里的invoiceResponse是一个数组，它有两个对象。我是maoing它和显示在下面的ui代码。现在我必须添加复选框在它的条件。就像它会显示2张牌值一个有10。00，第二个是20。00及以下我有一个自定义文本“总金额”所以如果我点击第一张卡有1个值，所以在totak金额应该显示10，如果我点击两者，那么它应该显示30。请帮帮忙

//数组API响应

invoiceResponse: [
  {
    remainingAmount: {
      unit: "GHS",
      value: "10.00",
    },
    id: "FINV-101010632629-22",
  },
  {
    remainingAmount: {
      unit: "GHS",
      value: "20.00",
    },
    id: "FINV-101010632345-33",
  },
];

// UI代码

const [checked, setChecked] = React.useState(false);

{formValues.activeTab === "By Invoice" &&
  invoiceResponse.map((data, index) => {
    return (
      <View key={index}>
        <View
          style={{
            backgroundColor: "white",
            borderRadius: 10,
            height: hp("10%"),
            marginTop: hp("1%"),
          }}
        >
          <View
            style={{
              backgroundColor: "white",
              padding: hp("2%"),
              borderRadius: 10,
              flexDirection: "row",
              justifyContent: "space-between",
            }}
          >
            <View>
              <CustomText
                text={data.id}
                textStyle={[
                  styles.textH3,
                  { color: themeObj.buttonTextColor },
                ]}
              />
              <View style={{ flexDirection: "row" }}>
                <CustomText
                  text={"Remaining Amount: "}
                  textStyle={[styles.btnTxtMed, { color: "#777777" }]}
                />
                <CustomText
                  text={parseFloat(data.remainingAmount.value).toFixed(2)}
                  textStyle={[
                    styles.btnTxtMed,
                    { color: themeObj.buttonTextColor },
                  ]}
                />
              </View>
              <View style={{ flexDirection: "row" }}>
                <CustomText
                  text={"Due date: "}
                  textStyle={[styles.btnTxtMed, { color: "#777777" }]}
                />
                <CustomText
                  text={formatDate(data.paymentDueDate)}
                  textStyle={[
                    styles.btnTxtMed,
                    { color: themeObj.buttonTextColor },
                  ]}
                />
              </View>
            </View>
            <View>
              <Checkbox
                status={checked ? "checked" : "unchecked"}
                onPress={() => {
                  setChecked(!checked);
                }}
                color={"#FC0"}
              />
            </View>
          </View>
          <CustomText
            text={`Total amoutn ${"value"}`}
            textStyle={[
              styles.btnTxtMed,
              { color: themeObj.buttonTextColor },
            ]}
          />
        </View>
      </View>
    );
  })}

react-native

来源：https://stackoverflow.com/questions/76100541/how-to-add-multiple-checkbox-in-array-and-add-the-value-on-condition-base-reac

1条答案

按热度按时间

camsedfj1#

这里的问题是多个复选框只有1个状态。相反，您可以做的是跟踪检查了哪个数据项的ids。
这里我们创建一个数组来跟踪检查的id。该函数帮助我们从状态切换id。

const [checkedIds, setCheckedIds] = useState([]);

function toggleChecked(idToToggle) {
  setCheckedIds((prev) => {
    if (prev.includes(idToToggle)) {
      return prev.filter((id) => id !== idToToggle);
    }
    return [...prev, idToToggle];
  });
}

当渲染时，在Checkbox中，我们检查id是否在数组中，并添加我们的切换函数。

function Component() {
  const [checkedIds, setCheckedIds] = useState([]);

  function toggleChecked(idToToggle) {
    setCheckedIds((prev) => {
      if (prev.includes(idToToggle)) {
        return prev.filter((id) => id !== idToToggle);
      }
      return [...prev, idToToggle];
    });
  }

  return (
    <div>
      {formValues.activeTab === "By Invoice" &&
        invoiceResponse.map((data, index) => {
          return (
            <View key={index}>
              <View
                style={{
                  backgroundColor: "white",
                  borderRadius: 10,
                  height: hp("10%"),
                  marginTop: hp("1%"),
                }}
              >
                <View
                  style={{
                    backgroundColor: "white",
                    padding: hp("2%"),
                    borderRadius: 10,
                    flexDirection: "row",
                    justifyContent: "space-between",
                  }}
                >
                  ...
                  <View>
                    <Checkbox
                      status={
                        checkedIds.includes(data.id) ? "checked" : "unchecked"
                      }
                      onPress={() => {
                        toggleChecked(data.id);
                      }}
                      color={"#FC0"}
                    />
                  </View>
                </View>
                ...
              </View>
            </View>
          );
        })}
    </div>
  );
}

您可以使用checkedIds来获得总值。

const total = invoiceResponse.reduce((acc, curr) => {
  if (checkedIds.includes(curr.id)) return acc + curr.remainingAmount.value;
  return acc;
});

赞(0）回复(0）举报 2023-05-01

我来回答

如何在数组中添加多个复选框并在条件库中添加值- react native

1条答案

相关问题

热门标签

最新问答