我正在尝试使用handleDelete功能删除任务，但有些东西引起了我的注意，我不知道为什么！每次我按下addTodos功能时，handleDelete都会自动触发，这是为什么？
我的目标是一旦我按下Map中的标签就得到id，但是对于像我这样的初学者来说，我不知道为什么一旦我按下添加按钮，handleDelete函数就会运行？
我的代码：

import { useState } from "react";
     import "./App.scss";

      function App() {
        //Value of Input
        const [val, setVal] = useState("");

      const [todos, setTodos] = useState([]);

      const addTodos = (e) => {
          e.preventDefault();
          setTodos([...todos, val]);
          setVal("");
       };

      const handleDelete = (id) => {
          console.log(id);
       };

      return (
        <div className="App">
        {/** On change values*/}
       <form onSubmit={addTodos}>
        <input
             onChange={(e) => setVal(e.target.value)}
             value={val}
             type="text"
         />
         <button type="submit">Add</button>
       </form>
       <ul>
          {todos.map((todo, key) => (
           <div key={key}>
              <li>{todo}</li>
              <a onClick={handleDelete(key)}>X</a>
           </div>
            ))}
       </ul>
      </div>
      );
      }

      export default App;

我尝试在handleDelete函数中的id内控制台日志，但控制台也是从addTodos函数触发的！