React 腾讯面试手写题

题目如下：

用 React 和 JS 实现一个组件，组件分为左右两块

左侧模块：展示可选列表，如 [1,2,3,4,5]，每一项是一个 checkbox，可以勾选和取消

勾选时，右侧模块会展示已选项的列表，并且每项旁边有个删除按钮，点击删除后，左侧对应项也会取消勾选

思路

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

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

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

代码

App.jsx

javascript 复制代码

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

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;
}