Как вызвать функцию контекста React с аргументом

поэтому я пытаюсь сделать что-то довольно простое, а именно использовать функцию из компонента контекста (который находится в отдельном файле).

Короче говоря, из компонента App визуализируйте TaskList и оберните его в Provider.

И, конечно же, в компоненте TaskList используйте Consumer, чтобы я мог использовать его onNewTask для обновления собственного состояния Context (Provider).

Во-первых, компонент приложения

import React, { Component } from "react";
import TaskList from "./Components/tasklist";
import Grid from "@material-ui/core/Grid";
import { TaskStore } from "./contexts/TasksStore";

class App extends Component {
  render() {
    return (
      <div>
        <Grid item xs zeroMinWidth>
          <TaskStore>
            <TaskList />
          </TaskStore>
        </Grid>
      </div>
    );
  }
}

export default App;

а затем компонент TaskList

import React, { Component } from "react";
import TaskContext from "../contexts/TasksStore";
import Task from "./task";

class TaskList extends Component {
  state = {
    newTask: ""
  };
  renderTasks(tasks) {
    return tasks.map(task => (
      <tr>
        <Task task = {task} />
      </tr>
    ));
  }
  onTextChange = el => {
    this.setState({ newTask: el.target.value });
    //console.info(el.target.value);
  };
  render() {
    return (
      <TaskContext.Consumer>
        {({ tasks, onNewTask }) => (
          <div>
            <input type = "text" value = {this.state.newTask} onChange = {this.onTextChange} />

            <button onClick = {onNewTask}>Add Task</button>

            <table className = "tasklist_container">
              <tbody>{this.renderTasks(tasks)}</tbody>
            </table>
          </div>
        )}
      </TaskContext.Consumer>
    );
  }
}

export default TaskList;

Чтобы быть конкретным, с onClick = {onNewTask} я застрял в том, как передать значение состояния TaskList в onNewTask. Я не могу сделать это здесь, в этом onClick

Вот компонент поставщика, который я настроил для TaskList (я называю компонент «хранилищем» в духе замены Redux)

import React from "react";

const Context = React.createContext();

export class TaskStore extends React.Component {
  state = { tasks: ["task1", "task2", "task3", "task4"] };

  onTaskSet = (tasks = []) => {
    this.setState({ tasks: tasks });
  };

  onAddTask = task => {
    const newState = [...this.state.tasks, task];
    this.onTaskSet(newState);
    console.info(newState);
  };

  render() {
    return (
      <Context.Provider value = {{ ...this.state, onTaskSet: this.onTaskSet, onNewTask: this.onAddTask }}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export default Context;

reactjs

14.01.2019 04:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 271

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот как можно передать аргумент задачи:

<button onClick = {() => onNewTask(this.state.newTask)}>Add Task</button>

Как обновить контекст React из дочернего компонента?

Также обратите внимание: https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b Вам следует переписать свой onNewTask

onAddTask = (task) => {
   const setNewState = (oldState) => {
     return {
       tasks: [...oldState.tasks, task]
     }
   }
   this.setState(setNewState);
   console.info(this.state.tasks)
 }

Отлично, спасибо. Я знал, что мне не хватало способа построить этот вызов onclick. Также оцените ссылки и совет по переписыванию

— 14.01.2019 05:54

Рад помочь, пожалуйста, одобрите и проголосуйте за ответ, чтобы помочь другим с той же проблемой

— 15.01.2019 04:48

14.01.2019 05:06