Javascript 无法理解react中的函数

我学会了如何反应，我已经列出了一个基本的待办事项清单。几乎所有的方面我都能理解，除了一个对我来说很奇怪的方面

所以在react中，我们通常调用如下函数：button onClick={btnClicked}。在我的待办事项列表中，当我想删除一个任务时，我需要调用一个调用另一个函数的函数。看起来是这样的：

div onClick = {() => removeItem(index)}> div

我不明白为什么我们在这里调用一个调用另一个函数的函数，而不是调用{removietem}函数

如果我只写

div Onclick = {removeItem}

程序操作不正确—它删除了一个项目，但未删除选定的项目

请帮忙

const Todo = () => {
  const [value, setValue] = useState({
    items: [],
    item: ""
  });

  const addItem = event => {
    event.preventDefault();
    if (value.item == "") {
      alert("Please fill in the input");
    } else {
      setValue({
        items: value.items.concat(value.item),
        item: ""
      });
      console.log(value.items);
    }
  };

  const removeItem = index => {
    const list = value.items;
    list.splice(index, 1);
    setValue({ items: list });
  };

  return (
    <div className={s.TodoList}>
      <h1 className={s.Title}>Todos</h1>
      <div>
        <form onSubmit={addItem} className={s.TodoForm}>
          <div className={s.Wrapper}>
            <h1>Add an item...</h1>

            <input
              type="text"
              name="item"
              value={value.item}
              onChange={e => setValue({ ...value, item: e.target.value })}
              placeholder="Type item here"
            />

            <button>Add</button>
            {value.items.map((item, index) => {
              return (
                <ul>
                  <li key={index}>
                    {item}
                    <div onClick={() => removeItem(index)}>
                      <i className="fas fa-times" />
                    </div>
                  </li>
                </ul>
              );
            })}
          </div>
        </form>
      </div>
    </div>
  );
};

---

区别其实很简单——您只需要了解函数得到的参数

考虑这个例子：

<button onClick={myHandler}>Hello!</button>

const myHandler = (args) => {
    // args is the React event object - I can use the info in this object
    // if I need to
};

---

在本例中，我将呈现一个元素列表，每个元素对应于listOfStuff中的每个项目。当用户单击其中一个列表项时，我需要知道他们单击了哪一个。在本例中，我不关心onClick处理程序中的事件，但我不使用它-如果不需要，可以将其忽略。但是我非常关心被点击的项目的ID。因此，在本例中，当用户单击并调用myHandler时，args将等于单击的项的ID。

区别实际上非常简单-您只需要了解函数得到的参数

考虑这个例子：

<button onClick={myHandler}>Hello!</button>

const myHandler = (args) => {
    // args is the React event object - I can use the info in this object
    // if I need to
};

---

在本例中，我将呈现一个元素列表，每个元素对应于listOfStuff中的每个项目。当用户单击其中一个列表项时，我需要知道他们单击了哪一个。在本例中，我不关心onClick处理程序中的事件，但我不使用它-如果不需要，可以将其忽略。但是我非常关心被点击的项目的ID。因此，在本例中，当用户单击并调用myHandler时，args将等于所单击项目的ID。

这是一个很好的问题！onClick属性期望传递一个函数

1. () => removeItem(index) is a function.

2. removeItem is also a function

那么为什么它会破裂呢

removeItem函数需要一个索引参数。单击时，React库实际上调用了您提供给onClick的带有事件对象的函数。用这个替换事件处理程序并打开浏览器的开发人员控制台来检查它

// Original
onClick = {() => removeItem(index)}

// New
onClick = {(event) => {
  console.log(event)
  removeItem(index)
}}

当您只传递removeItem时，React实际上是像这样调用函数，而不是使用index

这就是为什么我们要创建一个匿名函数——用我们在单击时期望的方式调用removeItem

// Ignores event object
onClick = {() => removeItem(index)}

---

这是一个很好的问题！onClick属性期望传递一个函数

1. () => removeItem(index) is a function.

2. removeItem is also a function

那么为什么它会破裂呢

removeItem函数需要一个索引参数。单击时，React库实际上调用了您提供给onClick的带有事件对象的函数。用这个替换事件处理程序并打开浏览器的开发人员控制台来检查它

// Original
onClick = {() => removeItem(index)}

// New
onClick = {(event) => {
  console.log(event)
  removeItem(index)
}}

当您只传递removeItem时，React实际上是像这样调用函数，而不是使用index

这就是为什么我们要创建一个匿名函数——用我们在单击时期望的方式调用removeItem

// Ignores event object
onClick = {() => removeItem(index)}

如果执行onClick={removietem}，函数如何知道它是哪个索引值？如果执行onClick={removietem}，函数如何知道它是哪个索引值？