时间戳

首页 > 解决方案 > React Native 复选框句柄

reactjs - React Native 复选框句柄

问题描述

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

               <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>

但是当检查为真时，所有文本都已检查，我该如何解决？

标签： reactjsreact-nativecheckbox

解决方案

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

注意：我只解释第二个。

因此，您必须向checkedCountry 对象添加属性。

那么您的来源将是：

<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
}

推荐阅读