如何使分段控件知道与之关联的联系人用户?

用户名

在我的本机0.59应用程序中,我想显示联系人用户列表及其名称和角色(如adminmessenger)供选择(带有复选框)。段控制选项卡用于显示3个角色供您选择。这是我出现的渲染代码:

import {CheckBox, View } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';

render() {
        return (
        <View style={styles.container}>
            {this.state.contacts.map((cb) => {
                            return (
                                <View style={{flex:1, flexDirection:'row'}}>
                                <CheckBox
                                    key={cb.id}
                                    title={cb.contact_for.name}
                                    checked={cb._checked}
                                    onPress={() => this.toggleCheckbox(cb.id)} />
                                <SegmentedControlTab
                                    values={['messenger', 'eventer', 'admin']}
                                    selectedIndex={this.state.selectedIndex}
                                    onTabPress={this.handleIndexChange}
                                    tabsContainerStyle={styles.tabContainerStyle}
                                />
                                </View>
                                )
                            })}        
            <Button
            title='Save'
            onPress={this.save}
            />
        </View>
        )
    }
}

此呈现代码的问题在于,该细分受众群不知道与之关联的联系人用户。如何使细分受众群知道与哪个联系人用户关联?

胜利者

当需要在列表项中显示的元素之间进行交互时,最好的方法通常是创建一个新的React组件来表示您的列表项。

使用这种模式,您将不得不在每行上执行保存操作,可能每行一个按钮...但是您也可以在数据更改后立即保存数据(这在我看来可以提供更好的用户体验)***

这是草稿。您的列表如下:

import {View } from 'react-native';
import {MyContactListItem} from 'myContactListItem.js';

render() {
        return (
        <View style={styles.container}>
            {this.state.contacts.map((cb) => {
                            return (
                                <MyContactListItem contact={cb}/>
                                )
                            })}   
        </View>
        )
    }
}

其他组件MyContactListItem看起来像波纹管。handleIndexChange那么就能知道它是指的哪个联系人,你可以找到contact的成分props

import {CheckBox, View } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';

render() {
        return (
        <View style={styles.container}>
            <View style={{flex:1, flexDirection:'row'}}>
               <CheckBox
                   key={contact.id}
                   title={contact.contact_for.name}
                   checked={contact._checked}
                   onPress={() => this.toggleCheckbox(contact.id)} />
               <SegmentedControlTab
                   values={['messenger', 'eventer', 'admin']}
                   selectedIndex={this.state.selectedIndex}
                   onTabPress={this.handleIndexChange}
                   tabsContainerStyle={styles.tabContainerStyle}/>
            </View>  
            <Button
            title='Save'
            onPress={this.save}
            />
        </View>
        )
    }
}

如果您绝对需要保留唯一的保存按钮,则另一个选择是管理一个数组,其中包含按下按钮时需要保存的每个控件的状态。您应该将此选项的使用限制为最大尺寸很小的列表(即可能适合您屏幕的列表)

*** edit:实际上可以在父组件中保留唯一的保存按钮,但是要管理起来很麻烦:您需要将状态已更改的信息发送到列表组件,MyContactListItem以便与id id,然后管理一系列更改。我不会这样

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何列出Alexa for Business的联系人?

对于已注册的用户联系人,如何在“联系人” Android应用中显示我的应用图标?

如何检查从多个联系人的用户联系人中删除了哪个号码?

Google助手/ Dialogflow /操作:如何获取用户的联系人?

如何检索每个可能的联系人?

如何知道Akka Cluster Client的初始联系人?

如何保存Google联系人ID?

如何获得用户经常交谈的联系人?

如何恢复联系人?

如何同步Google联系人?

如何从联系人获取联系人图像URL?

如何要求用户获得联系人许可才能访问并建立并打开联系人?

通过联系人ios添加用户

Android:如何知道哪些联系人已经安装了该应用程序?

如何从设备的联系人列表中获取用户的连接性?

Rails:当“联系人”是多态的时,如何计算用户拥有的联系人总数?

如何在Exchange 2013上为用户使用Powershell导入联系人?

如何允许App用户在彼此之间共享文件(例如共享联系人)

如何打开联系人并让用户决定是否要创建或选择一个联系人

如何自动从Thunderbird导出联系人

如何在联系人表视图顶部显示相同的应用程序用户?

如何使用RESTlet为Netsuite中的特定用户获取联系人?

如何向客户添加联系人

如何在Outlook 2016 c#中获取用户联系人列表?

如果“联系人”记录在NetSuite中的“公司”字段为空,则如何获取与公司关联的联系人

Swift:如何使用联系电话将用户重定向到“添加联系人”屏幕

如何显示单个用户的多个联系人swift 3

如何从 CONTENT URI 获取联系人

如何编辑联系人照片