React 无法通过 e.target.id 将 <input/> 的 ID 参数传递给事件处理程序

问：

这是 React react.dev 中状态管理的基本实践，代码应该像这个 codesandbox 一样工作：

这是我的代码：codesandbox

我试图将活动传递给 ，但失败了，id<input/>e.target.idhandleChange()

我知道我可以像这样传递参数：id
<input value={item.title} onChange={(e)=> handleChange(e, item.id)} />

但我很好奇为什么它会失败？e.target.id

多谢。

import { useState } from "react";

const initialItems = [
  { title: "pretzels", id: 0 },
  { title: "crispy seaweed", id: 1 },
  { title: "granola bar", id: 2 }
];

export default function App() {
  const [items, setItems] = useState(initialItems);
  
  function handleChange(e) {
    console.log(e.target.id); // i got the id number correctly
    const result = items.filter((item)=>item.id===e.target.id) 
    console.log(result)// I got a empty array 

    setItems(
      items.map((item) => {
        if (item.id === e.target.id) {
          return {
            ...item,
            title: e.target.value
          };
        } else {
          return item;
        }
      })
    );
  }

  const collection = items.map((item, index) => {
    return (
      <li key={item.id}>
        <input value={item.title} id={item.id} onChange={handleChange} />
      </li>
    );
  });

  return (
    <>
      <h1>What's your travel snack?</h1>
      <ul>{collection}</ul>
      <p>You picked </p>
    </>
  );
}