React 腾讯面试手写题

题目如下：

用 React 和 JS 实现一个组件，组件分为左右两块
左侧模块：展示可选列表，如 [1,2,3,4,5]，每一项是一个 checkbox，可以勾选和取消
勾选时，右侧模块会展示已选项的列表，并且每项旁边有个删除按钮，点击删除后，左侧对应项也会取消勾选

---

思路

这个题核心就是双向数据绑定，题中只有一个要管理的状态——右栏列表 selectedItems

点击左栏某一项 item 的勾选框，判断右栏中是否存在 item，若存在，则右栏移除 item；反之则添加 item。然后修改左栏的勾选状态 checked

右栏点击删除按钮时，使用列表的 filter 方法更新列表

---

代码

App.jsx

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";function App() {const [options] = useState([1, 2, 3, 4, 5]);const [selectedItems, setSelectedItems] = useState([]);function changeCheckbox(item) {if (selectedItems.includes(item)) {setSelectedItems(selectedItems.filter((id) => id !== item));} else {setSelectedItems([...selectedItems, item]);}}function deleteItem(id) {setSelectedItems(selectedItems.filter((item) => item !== id));}return (<><div className="container"><div className="left">{options.map((item) => {return (<div className="checkbox-item">{item}<input type="checkbox"className="check"checked={selectedItems.includes(item)}onChange={() => changeCheckbox(item)} /></div>);})}</div><div className="right">{selectedItems.map((item) => {return (<div className="selected-item"><span>{item} </span><button className="delete-btn"onClick={()=>deleteItem(item)}>删除</button></div>);})}</div></div></>);
}export default App;

App.css

#root {max-width: 1280px;margin: 0 auto;padding: 2rem;
}.container {display: flex;
}.left, .right {border: 1px solid #ddd;border-radius: 8px;width: 200px;
}
.delete-btn {background-color: orange;color: white;border: none;border-radius: 4px;padding: 0.25rem 0.5rem;cursor: pointer;font-size: 0.8rem;
}