React Native 复选框句柄

【问题标题】：React Native checkbox handleReact Native 复选框句柄
【发布时间】：2021-06-27 15:26:20
【问题描述】：

我有一个文件中的国家代码，我这样渲染它，它完美地返回所有国家名称和代码。

               <TouchableOpacity 
           style={st.oneCode}
           onPress={selectItem}>
              <View
                 style={[
                    st.filterCheckMarkWrapper,
                    check === false &&
                       st.filterCheckmarkInactiveColor,
                 ]}>
                 {check === true && (
                    <View style={st.filterCheckmark} />
                 )}
              </View><Text style={st.CodeText}>
                 {item.countryName}: +{item.phoneCode}
              </Text>
           </TouchableOpacity>

但是当检查为真时，所有的文本都被检查了，我该如何修复它？

【问题讨论】：

看看我的解决方案。

标签： reactjs react-native checkbox

【解决方案1】：

您可以在 Country 对象中添加 checklist 或 checked 属性，而不是使用 check 变量/状态。

注意：我只解释第二个。

因此，您必须将 checked 属性添加到您的 Country 对象。

那么您的来源将是：

<TouchableOpacity 
    style={st.oneCode}
    onPress={selectItem}>
    <View
        style={[
        st.filterCheckMarkWrapper,
        item.checked === false &&
            st.filterCheckmarkInactiveColor,
        ]}>
        {item.checked === true && (
        <View style={st.filterCheckmark} />
        )}
    </View><Text style={st.CodeText}>
        {item.countryName}: +{item.phoneCode}
    </Text>
</TouchableOpacity>

在您的onPress 事件中，您必须切换checked 属性。

例如：

function selectItem(item: Country) {
    item.checked = !item.checked;
    //your other works
}

【讨论】：