在 React js 中使用通過 map 方法創建的復選框

Question

希望你能在這里幫助我。

假設我有一個在 React js 中使用 map 方法創建的項目列表。

每個項目列表都包含文本和復選框（來自材料 ui lib 的復選框）。

現在我在使用復選框時遇到問題，因為當我向它們添加控件（選中和 onChange()）道具時 - 每當我勾選 1 個框 - 所有框都被勾選。 反之亦然。
然而，我的想法是，一旦我選中 1 個復選框 - 它應該划掉該框旁邊的文本（某種待辦事項列表）。

請給我一些點擊，我該怎么做？ 如何啟用每個復選框。

 <div className="lidiv">
    {items.map((item: any, index: number) => (
      <li
        key={item.id}
        style={{
          background: index % 2 === 0 ? "lightgray" : "transparent",
          padding: 3,
          textDecoration: decor,
        }}
      >
        {index + 1}
        <Box> {item.description}</Box>
        <Box>
          <Checkbox
            checked={checked}
            onChange={(e) => handleTick(item.id, e)}
          />
          <DeleteIcon
            sx={{ color: red[500], mb: -1 }}
            onClick={() => deleteItem(item.id)}
          />
        </Box>
      </li>
    ))}
  </div> 

Answer 1

您沒有發布代碼的重要部分，從您的評論看來，您正在處理一個 state 中的每個項目，每個項目都需要 state。

 const { useState } = React const App = () => { const [items, setItems] = useState([{ name: 'test 1', checked: false }, { name: 'test 2', checked: false }, { name: 'test 3', checked: false }]); const handleCheckBox = (event, index) => { const checked = event.target.checked; setItems(items => { return [...items.slice(0, index), {...items[index], checked}, ...items.slice(index + 1), ] }) } return ( <div> { items.map((item, i) => <div key={i}> <input type="checkbox" onChange={(e) => handleCheckBox(e, i)}/> <span style={{ textDecoration: item.checked? 'line-through': 'none' }}>{item.name}</span> </div> ) } </div> ) } ReactDOM.render(<App />,document.getElementById("root"))

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script> <div id="root"></div>