当前位置：首页 > React

react实现通讯录

2026-01-27 14:13:57React

实现React通讯录的基本步骤

使用React实现通讯录功能需要管理联系人数据、提供添加/编辑/删除功能，并支持搜索或分组展示。以下是核心实现方法：

数据状态管理

创建联系人状态和操作函数，使用useState或useReducer管理数据：

const [contacts, setContacts] = useState([
  { id: 1, name: '张三', phone: '13800138000', group: '同事' },
  { id: 2, name: '李四', phone: '13900139000', group: '朋友' }
]);

添加联系人功能

实现表单提交处理函数：

const handleAddContact = (newContact) => {
  setContacts([...contacts, { ...newContact, id: Date.now() }]);
};

搜索过滤功能

通过输入框动态过滤联系人：

const [searchTerm, setSearchTerm] = useState('');
const filteredContacts = contacts.filter(contact => 
  contact.name.toLowerCase().includes(searchTerm.toLowerCase())
);

按字母分组展示

实现联系人按首字母分组：

const groupByLetter = contacts.reduce((groups, contact) => {
  const letter = contact.name.charAt(0).toUpperCase();
  groups[letter] = groups[letter] || [];
  groups[letter].push(contact);
  return groups;
}, {});

完整组件示例

function ContactList() {
  const [contacts, setContacts] = useState(initialContacts);
  const [searchTerm, setSearchTerm] = useState('');

  const filteredContacts = contacts.filter(contact =>
    contact.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input 
        type="text" 
        placeholder="搜索联系人" 
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      {Object.entries(groupByLetter(filteredContacts)).map(([letter, group]) => (
        <div key={letter}>
          <h3>{letter}</h3>
          {group.map(contact => (
            <div key={contact.id}>
              {contact.name} - {contact.phone}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}