如何通过单击 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) => {&nbsp; const [checkedButton, setCheckedButton] = React.useState('')&nbsp; const productId = props.navigation.getParam("productId");&nbsp; const selectedProduct = useSelector((state) =>&nbsp; &nbsp; state.products.products.find((prod) => prod.id === productId)&nbsp; );&nbsp; const productsMultipleWeights = useSelector(&nbsp; &nbsp; (state) => state.products.productsMultipleWeights&nbsp; );&nbsp; var hasMultipleWeights = productsMultipleWeights.find(&nbsp; &nbsp; (prod) => Object.keys(prod)[0] == selectedProduct.id&nbsp; );&nbsp; if (hasMultipleWeights) {&nbsp; &nbsp; hasMultipleWeights = hasMultipleWeights[Object.keys(hasMultipleWeights)[0]];&nbsp; }return (&nbsp; &nbsp; <ScrollView style={{}}>&nbsp; &nbsp; &nbsp; <View style={styles.screen}>&nbsp; &nbsp; &nbsp; &nbsp; {hasMultipleWeights && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{ alignItems: "center" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ScrollView&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horizontal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentContainerStyle={{ padding: 2 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showsHorizontalScrollIndicator={false}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {hasMultipleWeights.map((item) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={() => setCheckedButton(item.id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...styles.productOptions,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: checkedButton === item.id ? "grey" : "white",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.productWeightVolumUnit}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.productWeightVolumeValue}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {NS(item.weight, "Arabic")}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {"&nbsp; "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {selectedProduct.weightVolumeUnit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MaterialCommunityIcons&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedProduct.weightVolumeUnit === "كغ"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? "weight-kilogram"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : selectedProduct.weightVolumeUnit === "مل"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? "water"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : "weight-gram"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size={26}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="grey"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.weightIcon}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ScrollView>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; </ScrollView>&nbsp; );};const styles = StyleSheet.create({productOptions: {&nbsp; &nbsp; shadowColor: "black",&nbsp; &nbsp; shadowOpacity: 0.26,&nbsp; &nbsp; elevation: 5,&nbsp; &nbsp; borderRadius: 10,&nbsp; &nbsp; backgroundColor: "white",&nbsp; &nbsp; width: 85,&nbsp; &nbsp; height: 65,&nbsp; &nbsp; marginHorizontal: 6,&nbsp; &nbsp; alignItems: "center",&nbsp; &nbsp; justifyContent: "center",&nbsp; &nbsp; shadowRadius: 2,&nbsp; &nbsp; shadowOffset: { width: 0, height: 1 },&nbsp; },});

Answer 2

似乎需要创建状态checkedId&nbsp;const [ checkedId, setCheckedId ] = useState('')&nbsp;useEffect(() =>&nbsp; &nbsp; // set first box to red at first render&nbsp; &nbsp; hasMultipleWeights && setCheckedId(hasMultipleWeights[0].id) ,[ hasMultipleWeights ])&nbsp;...&nbsp;<TouchableOpacity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={() =>setCheckedId(item.id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...styles.productOptions,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: item.id == checkedId ? 'red' : 'white',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >