如何通过单击 React Native 中的按钮来更改动态生成的 JSX 的样式

Question

我正在根据从后端API获得的数组值生成JSX代码。如下图所示，我正在根据数组的长度生成这些框。我想要的是，当我点击这些框中的任何一个时，背景颜色都会发生变化。我希望这些框的行为类似于单选按钮，因此一次只有一个框具有不同的背景颜色。数组名称为“hasMultipleWeights”。我只包括了代码的相关部分...const ProductDetailsScreen = (props) => {  const productId = props.navigation.getParam("productId");  const selectedProduct = useSelector((state) =>    state.products.products.find((prod) => prod.id === productId)  );  const productsMultipleWeights = useSelector(    (state) => state.products.productsMultipleWeights  );  var hasMultipleWeights = productsMultipleWeights.find(    (prod) => Object.keys(prod)[0] == selectedProduct.id  );  if (hasMultipleWeights) {    hasMultipleWeights = hasMultipleWeights[Object.keys(hasMultipleWeights)[0]];  }return (    <ScrollView style={{}}>      <View style={styles.screen}>        {hasMultipleWeights && (          <View style={{ alignItems: "center" }}>            <ScrollView              horizontal              contentContainerStyle={{ padding: 2 }}              showsHorizontalScrollIndicator={false}            >              {hasMultipleWeights.map((item) => (                <TouchableOpacity                  key={item.id}                  onPress={() => {}}                  style={{                    ...styles.productOptions,                    backgroundColor: 'white',                  }}                >                  <Text style={styles.productWeightVolumUnit}>                    <Text style={styles.productWeightVolumeValue}>                      {NS(item.weight, "Arabic")}                    </Text>                    {"  "}                    {selectedProduct.weightVolumeUnit}                  </Text>                  <MaterialCommunityIcons                    name={                      selectedProduct.weightVolumeUnit === "كغ"                        ? "weight-kilogram"                        : selectedProduct.weightVolumeUnit === "مل"                        ? "water"                        : "weight-gram"                    }

Answer 1

要动态更改颜色，您必须使用状态。因此，创建一个新状态来检查“已选中”按钮，在 onPress 方法中更改它，然后进行验证。

const ProductDetailsScreen = (props) => {

  const [checkedButton, setCheckedButton] = React.useState('')

  const productId = props.navigation.getParam("productId");

  const selectedProduct = useSelector((state) =>

    state.products.products.find((prod) => prod.id === productId)

  );

  const productsMultipleWeights = useSelector(

    (state) => state.products.productsMultipleWeights

  );

  var hasMultipleWeights = productsMultipleWeights.find(

    (prod) => Object.keys(prod)[0] == selectedProduct.id

  );

  if (hasMultipleWeights) {

    hasMultipleWeights = hasMultipleWeights[Object.keys(hasMultipleWeights)[0]];

  }

return (

    <ScrollView style={{}}>

      <View style={styles.screen}>

        {hasMultipleWeights && (

          <View style={{ alignItems: "center" }}>

            <ScrollView

              horizontal

              contentContainerStyle={{ padding: 2 }}

              showsHorizontalScrollIndicator={false}

            >

              {hasMultipleWeights.map((item) => (

                <TouchableOpacity

                  key={item.id}

                  onPress={() => setCheckedButton(item.id)}

                  style={{

                    ...styles.productOptions,

                    backgroundColor: checkedButton === item.id ? "grey" : "white",

                  }}

                >

                  <Text style={styles.productWeightVolumUnit}>

                    <Text style={styles.productWeightVolumeValue}>

                      {NS(item.weight, "Arabic")}

                    </Text>

                    {"  "}

                    {selectedProduct.weightVolumeUnit}

                  </Text>

                  <MaterialCommunityIcons

                    name={

                      selectedProduct.weightVolumeUnit === "كغ"

                        ? "weight-kilogram"

                        : selectedProduct.weightVolumeUnit === "مل"

                        ? "water"

                        : "weight-gram"

                    }

                    size={26}

                    color="grey"

                    style={styles.weightIcon}

                  />

                </TouchableOpacity>

              ))}

            </ScrollView>

          </View>

        )}

      </View>

    </ScrollView>

  );

};

const styles = StyleSheet.create({

productOptions: {

    shadowColor: "black",

    shadowOpacity: 0.26,

    elevation: 5,

    borderRadius: 10,

    backgroundColor: "white",

    width: 85,

    height: 65,

    marginHorizontal: 6,

    alignItems: "center",

    justifyContent: "center",

    shadowRadius: 2,

    shadowOffset: { width: 0, height: 1 },

  },

});

Answer 2

似乎需要创建状态checkedId

 const [ checkedId, setCheckedId ] = useState('')

 useEffect(() =>

    // set first box to red at first render

    hasMultipleWeights && setCheckedId(hasMultipleWeights[0].id) ,[ hasMultipleWeights ])

 ...

 <TouchableOpacity

              key={item.id}

              onPress={() =>setCheckedId(item.id)}

              style={{

                ...styles.productOptions,

                backgroundColor: item.id == checkedId ? 'red' : 'white',

              }}

            >