如何使用参数调用 React Context 函数

Question

所以我正在尝试做一些非常简单的事情，即使用上下文组件（位于单独的文件中）中的函数。

简而言之，从 App 组件渲染一个 TaskList，并将其包装在一个 Provider 中。

当然，在 TaskList 组件中，使用 Consumer，所以我可以使用它的 onNewTask 来更新 Context（Provider 的）自己的状态。

首先是 App 组件

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.log(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 设置的 Provider 组件（本着取代 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.log(newState);
  };

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

export default Context;

Answer 1

这是传递任务参数的方法：

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

How to update React Context from inside a child component?

另请注意： 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.log(this.state.tasks)
 }