模仿苹果通讯录,微信通讯录功能列表

因为要做项目 随手写了一个这样的一个功能的小玩意 因为看了后台返回的不是我想要的 所以关于渲染的问题大家不要嫌弃 重要的是几个小功能 这个小组件基于react项目 直接复制写好路由即可用 希望能帮到大家
代码:

`import React, { Component } from "react";
import "./first.css";
class First extends Component {
      constructor(props) {
            super(props);
            this.state = {
                  users: [
                        { id: 0, name: "aaa" },
                        { id: 1, name: "ahat" },
                        { id: 2, name: "aocial" },
                        { id: 3, name: "aircle" },

                        { id: 4, name: "bbb" },
                        { id: 5, name: "bhat" },
                    { id: 6, name: "bocial" },
                    { id: 7, name: "bircle" },

                    { id: 8, name: "ccc" },
                    { id: 9, name: "chat" },
                    { id: 10, name: "cocial" },
                    { id: 11, name: "circle" },

                    { id: 12, name: "ddd" },
                    { id: 13, name: "dhat" },
                    { id: 14, name: "docial" },
                    { id: 15, name: "dircle" },

                    { id: 16, name: "eee" },
                    { id: 17, name: "ehat" },
                    { id: 18, name: "eocial" },
                    { id: 19, name: "eircle" },

                    { id: 20, name: "fff" },
                    { id: 21, name: "fehat" },
                    { id: 22, name: "feocial" },
                    { id: 23, name: "feircle" },

                    { id: 24, name: "ggg" },
                    { id: 25, name: "gehat" },
                    { id: 26, name: "geocial" },
                    { id: 27, name: "geircle" },

                    { id: 28, name: "hhh" },
                    { id: 29, name: "hehat" },
                    { id: 30, name: "heocial" },
                    { id: 31, name: "heircle" },

                    { id: 32, name: "iii" },
                    { id: 33, name: "iehat" },
                    { id: 34, name: "ieocial" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" },
                    { id: 35, name: "ieircle" }
              ],
              ids: [
                    { id: 1, name: "a" },
                    { id: 2, name: "b" },
                    { id: 3, name: "c" },
                    { id: 4, name: "d" },
                    { id: 5, name: "e" },
                    { id: 6, name: "f" },
                    { id: 7, name: "g" },
                    { id: 8, name: "h" },
                    { id: 9, name: "i" }
              ],
              val: "",
              displayName: "block",
              inpv: []//搜索出来的列表
        };
  }
  //锚点定位
  scrollToAnchor = e => {
        var anchorElement = document.getElementById(e.target.innerHTML);
        anchorElement.scrollIntoView();
  };
  //值改变事件
  handleChange = () => {
        const inpVal = this.input.value;
        // console.log(inpVal);
        let newArray = this.state.users.map(item => {
              return item.name;
        });
        // console.log(newArray)
        // 声明一个数组
        var inpvs = [];
        var cp= []
        newArray.forEach((item, index) => {
              // console.log(item)
              if (item.indexOf(inpVal) == 0 && inpVal != "") {
                    //表示strCode是以xx开头；
                    // console.log(item)
                    //把它们加到一个数组当中
                    inpvs.push(item);
                    // console.log(inpvs);
                    //设置显示出来的值
                    cp =inpvs
                    
                    this.setState({
                          inpv: inpvs
                    });
                   
                   
              } else {
                    //表示strCode不是xx以开头
              }
              // console.log(inpvs)
        });
        //如果输入框为空白 清空查询列表
        if(inpVal ===""){
              this.setState({
                    inpv: []
              });
        }
        // console.log(cp)
        //如果查询为空白 清空查询列表
        if(cp ==false){
              // console.log(cp)
              this.setState({
                    inpv: []
              });
        }
        inpvs = [];
  };
  //失去焦点事件
  handleBlur = () => {
        this.setState({
              displayName: "block"
        });
        //清空搜索框
        this.input.value =''
       //清空搜索列表
        this.setState({
              inpv: []
        });
        
  };
  //获取焦点事件
  handleFocus = () => {
        this.setState({
              displayName: "none"
        });
        
  };

  render() {
        const { users, ids, inpv } = this.state;

        // console.log(newArray)
        let lia = users.map((item, index) => {
              return (
                    <div>
                          {item.id <= 4 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lib = users.map((item, index) => {
              return (
                    <div>
                          {item.id <= 7 && item.id > 4 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lic = users.map((item, index) => {
              return (
                    <div>
                          {item.id <= 11 && item.id > 7 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lid = users.map((item, index) => {
              return (
                    <div>
                          {item.id < 16 && item.id > 12 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lie = users.map((item, index) => {
              return (
                    <div>
                          {item.id < 20 && item.id > 16 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lif = users.map((item, index) => {
              return (
                    <div>
                          {item.id < 24 && item.id > 20 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lig = users.map((item, index) => {
              return (
                    <div>
                          {item.id < 27 && item.id > 24 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lih = users.map((item, index) => {
              return (
                    <div>
                          {item.id < 32 && item.id > 28 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let lii = users.map((item, index) => {
              return (
                    <div>
                          {item.id > 32 ? (
                                <li key={index}>{item.name}</li>
                          ) : (
                                ""
                          )}
                    </div>
              );
        });
        let Listleft = ids.map((item, index) => {
              return (
                    <div>
                          <i key={item.id} onClick={this.scrollToAnchor}>
                                {item.name}
                          </i>
                    </div>
              );
        });
        let ShowSearch = inpv.map((item, index) => {
              return (
                    <div>
                          <li>{item}</li>
                    </div>
              );
        });
        return (
              <div className="bodyCont">
                    <div className="searchBar">
                          <input
                                type="text"
                                placeholder="请输入你要搜索的国家"
                                onFocus={this.handleFocus}
                                onBlur={this.handleBlur}
                                onChange={this.handleChange.bind(this)}
                                ref={input => (this.input = input)}
                                defaultValue=""
                          />
                    </div>
                    <div
                          style={{
                                display:
                                      this.state.displayName === "none"
                                            ? "block"
                                            : "none"
                          }}
                    >
                          <ul>{ShowSearch}</ul>
                    </div>
                    <div style={{ display: this.state.displayName }}>
                          <ul>
                                <p id="a">a</p>
                                {lia}
                                <p id="b">b</p>
                                {lib}
                                <p id="c">c</p>
                                {lic}
                                <p id="d">d</p>
                                {lid}
                                <p id="e">e</p>
                                {lie}
                                <p id="f">f</p>
                                {lif}
                                <p id="g">g</p>
                                {lig}
                                <p id="h">h</p>
                                {lih}
                                <p id="i">i</p>
                                {lii}
                          </ul>
                    </div>
                    <div style={{ display: this.state.displayName }}>
                          <ul>
                                <li className="list">{Listleft}</li>
                          </ul>
                    </div>
              </div>
        );
  }
}

export default First;

`
好了,我写的东西只是希望大家都能看懂 需要的大家学习学习,希望能帮到大家,下次再见!