时间戳

首页 > 解决方案 > 无法理解反应中的功能

javascript - 无法理解反应中的功能

问题描述

我学会了做出反应，并制作了一个基本的待办事项清单。几乎我理解的所有方面，除了一个对我来说似乎很奇怪。

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

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

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

如果我只写

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

标签： javascriptreactjs

解决方案

这是一个很好的问题！onClickprop 期望被传递一个函数。

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

2. removeItem is also a function

那么它为什么会破裂呢？

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

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

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

当你只传递它时removeItem，React 实际上是像这样调用函数而不是withindex

onClick={removeItem}

// What React does on click
removeItem(event)

这就是我们创建匿名函数的原因——removeItem用我们期望的点击调用。

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

推荐阅读