如何使用参数调用function上下文函数

Question

因此，我试图做一些非常简单的事情，即从上下文组件(在一个单独的文件中)使用函数。

在nushell中，从中呈现一个TaskList，并将其包装在一个提供程序中。

当然，在TaskList组件中，使用使用者，这样我就可以使用它的onNewTask来更新上下文(提供者)自己的状态。

For，首先是应用程序组件

​

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设置的提供者组件(本着替换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)
 }

​