React电话簿应用删除联系人按钮功能实现求助

步骤1：在App组件中添加删除函数 #

联系人数据entries的状态由App组件管理，因此删除逻辑需要写在App中。我们通过过滤数组移除指定联系人：

function App() {
  const [entries, setEntries] = useState(entries_data);

  useEffect(() => {
    console.log("application:", JSON.stringify(entries, null, 2));
    return () => console.log("App is re-rendering!");
  });

  const addEntry = entry => {
    setEntries(entries => [...entries, entry]);
  };

  // 新增删除函数：过滤掉目标联系人
  const deleteEntry = (entryToDelete) => {
    setEntries(prevEntries => 
      prevEntries.filter(entry => entry.Name !== entryToDelete.Name)
    );
  };

  return (
    <section>
      <h1>Phone Book</h1>
      <PhoneBookForm addEntry={addEntry} />
      {/* 将删除函数传递给展示组件 */}
      <InformationTable entries={entries} deleteEntry={deleteEntry} />
    </section>
  );
}

注意：用Name作为判断依据存在重名风险，建议给每个联系人添加唯一id字段优化逻辑：

// 添加联系人时生成唯一id
const addEntry = entry => {
  setEntries(entries => [...entries, {...entry, id: Date.now()}]);
};

// 基于id删除
const deleteEntry = (entryToDelete) => {
  setEntries(prevEntries => 
    prevEntries.filter(entry => entry.id !== entryToDelete.id)
  );
};

步骤2：修改联系人条目组件，添加删除按钮 #

让每个联系人条目带上删除按钮，点击时触发删除函数：

function PhoneBookEntry({ entry, deleteEntry }) {
  return (
    <tr>
      <td>{entry.Name}</td>
      <td>{entry.phone}</td>
      <td>
        <button 
          onClick={() => deleteEntry(entry)}
          style={{padding: "4px 8px", cursor: "pointer"}}
        >
          删除
        </button>
      </td>
    </tr>
  );
}

步骤3：更新展示组件，传递删除函数 #

修改InformationTable组件，接收删除函数并传递给每个联系人条目，同时新增操作列：

function InformationTable({ entries, deleteEntry }) {
  return (
    <>
      <table style={style.table} className="informationTable">
        <thead>
          <tr>
            <th style={style.tableCell}>Name</th>
            <th style={style.tableCell}>Phone</th>
            <th style={style.tableCell}>操作</th>
          </tr>
        </thead>
        <tbody>
          {!entries.length && <tr><td colSpan="3">No data :( </td></tr>}
          {entries.map(entry => (
            <PhoneBookEntry 
              entry={entry} 
              key={entry.Name} {/* 若用id则改为entry.id */}
              deleteEntry={deleteEntry}
            />
          ))}
        </tbody>
      </table>
    </>
  );
}

（可选）实现批量删除功能 #

如果需要使用表格下方的批量删除按钮，可按以下方式修改InformationTable：

function InformationTable({ entries, setEntries }) {
  const [selectedEntries, setSelectedEntries] = useState([]);

  // 切换单条选中状态
  const toggleSelect = (entry) => {
    setSelectedEntries(prev => 
      prev.includes(entry) 
        ? prev.filter(item => item.Name !== entry.Name)
        : [...prev, entry]
    );
  };

  // 批量删除选中条目
  const handleBatchDelete = () => {
    setEntries(prevEntries => 
      prevEntries.filter(entry => !selectedEntries.includes(entry))
    );
    setSelectedEntries([]);
  };

  return (
    <>
      <table style={style.table} className="informationTable">
        <thead>
          <tr>
            <th style={style.tableCell}>
              <input type="checkbox" onChange={(e) => {
                // 全选/取消全选
                setSelectedEntries(e.target.checked ? [...entries] : []);
              }}/>
            </th>
            <th style={style.tableCell}>Name</th>
            <th style={style.tableCell}>Phone</th>
          </tr>
        </thead>
        <tbody>
          {!entries.length && <tr><td colSpan="3">No data :( </td></tr>}
          {entries.map(entry => (
            <tr key={entry.Name}>
              <td>
                <input 
                  type="checkbox" 
                  checked={selectedEntries.includes(entry)} 
                  onChange={() => toggleSelect(entry)}
                />
              </td>
              <td>{entry.Name}</td>
              <td>{entry.phone}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <br />
      <input 
        style={style.form.deleteBtn} 
        type="button" {/* 改为button类型，避免触发表单提交 */}
        value="Delete Selected" 
        onClick={handleBatchDelete}
        disabled={selectedEntries.length === 0} {/* 无选中时禁用 */}
      />
    </>
  );
}

同时需要在App组件中把setEntries传递给InformationTable。

内容的提问来源于stack exchange，提问作者Sanja