функции, переданные как реквизиты, вызываются независимо

Question

Я разрабатываю приложение, которое имеет следующую иерархию компонентов (любезно предоставлено ProReact)

KanbanContainer => KanbanBoard => List => Card => CheckList

KanbanContainer содержит методы, которые необходимопередаваться в компонент CheckList (так как этот компонент имеет все элементы управления пользовательского интерфейса).Методы в KanbanContainer определяются следующим образом:

class KanbanBoardContainer extends Component {
  state = { cards: [] };

  componentDidMount() {
    this.setState({ cards: API.getTasks() });
  }
  addTask = (cardId, taskName) => {
    console.log(taskName, " invoked for cardId =", cardId);
  };
  deleteTask = (cardId, taskId, taskIndex) => {
    console.log("deleteTask invoked for cardId = ", cardId);
  };
  toggleTask = (cardId, taskId, taskIndex) => {
    console.log("toggleTask invoked fpr cardId = ", cardId);
  };

  render() {
    return (
      <KanbanBoard
        cards={this.state.cards}
        taskCallbacks={{
          toggleTask: this.toggleTask,
          addTask: this.addTask,
          deleteTask: this.deleteTask
        }}
      />
    );
  }
}

Во всех других компонентах taskCallbacks просто передаются через реквизиты.Например:

class List extends React.Component {
  render() {
    let cards = this.props.cards.map(c => {
      return (
        <Card
          id={c.id}
          key={c.id}
          title={c.title}
          description={c.description}
          color={c.color}
          tasks={c.tasks}
          taskCallbacks={this.props.taskCallbacks}
        />
      );
    });

    return (
      <div className="list">
        <h1>{this.props.title}</h1>
        {cards}
      </div>
    );
  }
}

В последнем компоненте функции, переданные через реквизиты, присоединяются к элементам управления пользовательского интерфейса, таким как флажок и ссылка.

class CheckList extends Component {
  checkInputKeyPress = event => {
    if (event.key === "Enter") {
      this.props.taskCallbacks.addTask(this.props.cardId, event.target.value);
      event.target.value = "";
    }
  };
  render() {
    const { deleteTask, toggleTask } = this.props.taskCallbacks;
    let tasks = this.props.tasks.map((t, index) => (
      <li key={t.id}>
        <input
          type="checkbox"
          name=""
          id=""
          defaultChecked={t.done}
          onChange={toggleTask(this.props.cardId, t.id, index)}
        />{" "}
        {t.name}{" "}
        <a
          href="#"
          onClick={deleteTask(this.props.cardId, t.id, index)}
        />
      </li>
    ));
    return (
      <div>
        <ul>{tasks}</ul>
        <input
          type="text"
          placeholder="Key in a task and hit enter"
          onKeyPress={this.checkInputKeyPress}
        />
      </div>
    );
  }
}

Однако, когда я загружаю приложение, функции вызываются «под нагрузкой», и ничего не происходит при нажатии элементов управления.Только addTask () вызывается, когда вы набираете текстовое поле и нажимаете ввод.Чего мне не хватает?

Answer 1

Создайте функцию в последнем компоненте, которая вызывает функцию prop с соответствующими аргументами.То есть, не вызывайте функцию напрямую из onClick / onChange, потому что эти реквизиты ожидают ссылку на функцию, а не результат вызова функции.

Самое главное, вы должны проверить API контекста , чтобы не пропускать столько реквизита.

Answer 2

Используя:

onClick={deleteTask(this.props.cardId, t.id, index)}

Функция будет вызвана на месте.Попробуйте переключиться на:

onClick={() => deleteTask(this.props.cardId, t.id, index)}

Для ясности deleteTask является ссылкой на функцию, deleteTask() вызывает функцию.В ситуации, когда вам нужно вызвать функцию (например, для передачи аргументов), приведенный выше шаблон является анонимной функцией, которая вызывает вашу deleteTask функцию.