使用 map() 在 react-native 中处理复选框

Question

我正在使用 '@react-native-community/checkbox'，因为我正在从数据库中检索数据并使用 map 函数将其渲染为白色复选框，问题是当我选中一个框时所有框都被选中，当我取消选中时也一样问题出在每个复选框的状态上，但我不知道如何处理它，因为我只想选中选中的复选框并将其所有数据放入一个数组中以供进一步处理。

这里是我呈现为复选框的数据：

{"id": "12345", "price": 5, "text": "Reload"}

这是地图函数的代码：

{data.map((b, index) => {
         return (
                   <View key={b.id} style={{ flex: 1, flexDirection: 'column', width: windowWidth, paddingLeft: 15, paddingRight: 15 }}>
                   <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between' }}>
                          <CheckBox
                             disabled={false}
                             value={checked}
                             onValueChange={(newValue) => { setIschecked(newValue) }}

                            />

                          <Text>{b.text}   </Text>
                   </View>

                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

                         <Text style={{ fontSize: 10, fontWeight: 'bold', color: COLORS.darkgray }}>  
                            {" USD " + b.price} 
                         </Text>
                   </View>



              </View>
           )
       })}

我发现了一个与我的问题完全相同的问题但不幸的是这对我不起作用

感谢并提前

Answer 1

在 React 状态下，您必须将复选框的状态与数据本身分开存储。

首先在第一次渲染时创建一个空对象，这将充当复选框 id 到其选中值的映射：

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

在您的 map 中，您可以根据 b.id:

找到该特定复选框的值

value={checked[b.id]}

最后，在您的回调中，确保您也根据 b.id:

在 checked 中更新了正确的值

onValueChange={(newValue) => { setChecked({...checked, [b.id]: newValue}) }}

放在一起：

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

// rest of your render function

     {data.map((b, index) => {
         return (
                   <View key={b.id} style={{ flex: 1, flexDirection: 'column', width: windowWidth, paddingLeft: 15, paddingRight: 15 }}>
                   <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between' }}>
                          <CheckBox
                             disabled={false}
                             value={checked[b.id]}
                             onValueChange={(newValue) => { setChecked({...checked, [b.id]: newValue}) }}

                            />

                          <Text>{b.text}   </Text>
                   </View>

                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

                         <Text style={{ fontSize: 10, fontWeight: 'bold', color: COLORS.darkgray }}>  
                            {" USD " + b.price} 
                         </Text>
                   </View>



              </View>
           )
       })}

使用 map() 在 react-native 中处理复选框

Handling checkbox in react-native using map()

checkbox

reactjs

react-native

react-hooks