react怎么实现通讯录

react实现通讯录的方法：1、创建一批通讯录数据；2、准备左右两个dom容器，分别用于承载用户列表和首字母列表；3、生成用户列表和首字母列表；4、将首字母页面的id作为字母列表的值；5、把对应首字母页面的id传到方法里，然后通过h5的scrollIntoView方法跳转到对应的锚点即可。

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现通讯录？

react实现通讯录效果

业务描述：通过react实现一个类似通讯录的页面，并可以通过点击侧边首字母跳转到对应的用户

大致效果

步骤

1，先造一批假数据

 const users = [
                [
                {id: 0,  name:"a",imgUrl:white},
                {id: 1,  name:'ahat',imgUrl:sysImg4},
                {id: 2,  name:'aocial',imgUrl:sysImg4},
                {id: 3,  name:'aircle',imgUrl:sysImg4},
              ],
                [
                    {id: 4,  name:"b",imgUrl:white},
                    {id: 5,  name:'bhat',imgUrl:sysImg4},
                    {id: 6,  name:'bocial',imgUrl:sysImg4},
                    {id: 7,  name:'bircle',imgUrl:sysImg4},
                ]
            ,
            [
                {id: 8,  name:"c",imgUrl:white},
                {id: 9,  name:'chat',imgUrl:sysImg4},
                {id: 10,  name:'cocial',imgUrl:sysImg4},
                {id: 11,  name:'circle',imgUrl:sysImg4},
            ]
            ,
            [
                {id: 12,  name:"d",imgUrl:white},
                {id: 13,  name:'dhat',imgUrl:sysImg4},
                {id: 14,  name:'docial',imgUrl:sysImg4},
                {id: 15,  name:'dircle',imgUrl:sysImg4},
            ]
            ,
            [
                {id: 16,  name:"e",imgUrl:white},
                {id: 17,  name:'ehat',imgUrl:sysImg4},
                {id: 18,  name:'eocial',imgUrl:sysImg4},
                {id: 19,  name:'eircle',imgUrl:sysImg4},
            ]
        ];

2生成用户列表页面

华友协同办公自动化OA系统

华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

下载

1先准备左右两个dom容器，分别用于承载用户列表和首字母列表

return (
        

            

              

                  {pointLists}
              
              
            

                {userLists}
            
        
        )

css

.chatRight{
    height: 100%;width: 3%;
    position:fixed;right: 0;
}
.chatLeft{
    height: 100%;width: 95%;
}

2通过数据分别生成用户列表和首字母列表放入上一步生成的容器中

     //用户列表
        var userLists=new Array();
        //侧栏首字母列表
        var pointLists=new Array();
        //遍历
        for(var i=0;i
                    

                        @@##@@
                        

                            
{number.name}
                            

                        
                    
                    )
            //将用户信息放入用户列表
            userLists.push(userList);
            //生成首字母信息
            const point=
this.scrollToAnchor(msg)}
                            className={jsPage.pointStyle}
                             key={user[0].name}
                             >{user[0].name}
                             
            //将首字母信息放入首字母列表
            pointLists.push(point);
        }

3 点击首字母滚动到对应用户

注意我们在第二步生成画面的时候，重要的一步：将首字母页面的id作为字母列表的值

this.scrollToAnchor(msg)}
                            className={jsPage.pointStyle}
                             key={user[0].name}
                             >{user[0].name}
                             

这样通过点击首字母时就可以把对应首字母页面的id传到方法里，然后通过h5的scrollIntoView方法跳转到对应的锚点，

   scrollToAnchor  (e)  {
            // 找到锚点
            var anchorElement = document.getElementById(e.target.innerHTML);
            // 如果对应id的锚点存在，就跳转到锚点
           anchorElement.scrollIntoView();
    }

这样就可以啦

推荐学习：《react视频教程》