Reactjs 如何从React中的一个子组件更新容器组件的状态？

如果这是一个经常出现的问题，我很抱歉，但我真的很难理解

我正在React中创建一个基本待办事项列表应用程序

容器当前包含一个表单，该表单接收信息，并将状态中输入的每个项添加到items数组中。然后，我有一个“任务列表”组件，该组件接受此状态并呈现我的任务

我想做的是创建一个单独的表单组件，而不是将表单放在容器中

问题是，如果我只是将表单的代码复制到一个新组件中，它将修改的状态是它自己的，因此不能通过TaskList组件访问它来呈现任务列表

是否有任何方法可以让组件更新其父组件的状态。下面是我的源代码供参考

导出默认类容器扩展React.Component{
构造函数（）{
超级（）；
this.handleSubmit=this.handleSubmit.bind（this）；
此.state={
项目：[]
}
}
handleSubmit（e）{
e、 预防默认值（）；
var itemsArray=this.state.items；
itemsArray.push（如target.elements.task.value）；
这是我的国家({
项目：itemsArray
})
e、 target.reset（）；
}
render（）{
返回(
待办事项
添加
);
}
}

---

你可以这样做。将更改状态的父函数作为道具传递给表单组件。在表单句柄提交函数中，将父函数调用为

this.props.addTodo（todoText）

Container.js

import React，{Component}来自'React'；
从“/TaskList”导入任务列表；
从“./Form”导入表单；
导出默认类容器扩展组件{
构造函数（）{
超级（）；
this.handleAdd=this.handleAdd.bind（this）；
此.state={
项目：[]
}
}
手持式（todoText）{
var itemsArray=this.state.items；
itemsArray.push（todoText）；
这是我的国家({
项目：itemsArray
})
}
render（）{
返回(
待办事项
);
}
}

Form.js

import React，{Component}来自'React'；
导出默认类表单扩展组件{
handleSubmit（e）{
e、 预防默认值（）；
让todoText=e.target.elements.task.value；
如果（todoText.length>0）{
e、 target.elements.task.value=''；
this.props.addTodo（todoText）；
}否则{
e、 target.elements.task.focus（）；
}
}
render（）{
返回(
此.handleSubmit（e）}>
添加
);
}
}

TaskList.js

从“React”导入React；
const TaskList=props=>{
var tasks=（props.data）.map（（项，键）=>{return
{item}
}）
返回(

{tasks}

);
}
导出默认任务列表；

你可以这样做。将更改状态的父函数作为道具传递给表单组件。在表单句柄提交函数中，将父函数调用为

this.props.addTodo（todoText）

Container.js

import React，{Component}来自'React'；
从“/TaskList”导入任务列表；
从“./Form”导入表单；
导出默认类容器扩展组件{
构造函数（）{
超级（）；
this.handleAdd=this.handleAdd.bind（this）；
此.state={
项目：[]
}
}
手持式（todoText）{
var itemsArray=this.state.items；
itemsArray.push（todoText）；
这是我的国家({
项目：itemsArray
})
}
render（）{
返回(
待办事项
);
}
}

Form.js

import React，{Component}来自'React'；
导出默认类表单扩展组件{
handleSubmit（e）{
e、 预防默认值（）；
让todoText=e.target.elements.task.value；
如果（todoText.length>0）{
e、 target.elements.task.value=''；
this.props.addTodo（todoText）；
}否则{
e、 target.elements.task.focus（）；
}
}
render（）{
返回(
此.handleSubmit（e）}>
添加
);
}
}

TaskList.js

从“React”导入React；
const TaskList=props=>{
var tasks=（props.data）.map（（项，键）=>{return
{item}
}）
返回(

{tasks}

);
}
导出默认任务列表；

最好的方法是使用全局状态，比如Redux。官方的例子是待办事项清单：这是否回答了您的问题？最好的方法是使用全局状态，比如Redux。官方的例子是待办事项清单：这是否回答了您的问题？

import React, { Component } from 'react';
import TaskList from './TaskList';
import Form from './Form';

export default class Container extends Component {
  constructor() {
    super();
    this.handleAdd = this.handleAdd.bind(this);
    this.state = {
      items: []
    }
  }

  handleAdd(todoText) {
    var itemsArray = this.state.items;
    itemsArray.push(todoText);
    this.setState({
      items: itemsArray
    })
  }

  render() {
    return (
      <div className="">
        <header className="header">TODO</header>
          <Form addTodo={this.handleAdd}/>
          <TaskList data={this.state.items} />
      </div>
    );
  }
}

import React, { Component } from 'react';

export default class Form extends Component {
  handleSubmit(e) {
    e.preventDefault();
    let todoText = e.target.elements.task.value;
    if(todoText.length > 0) {
      e.target.elements.task.value = '';
      this.props.addTodo(todoText);
    }else{
      e.target.elements.task.focus();
    }
  }

  render() {
    return(
      <div>
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input name="task" placeholder="Task"></input>
          <button type="submit">Add</button>
        </form>
      </div>
    );
  }
}

import React from 'react';

const TaskList = props => {
  var tasks = (props.data).map( (item, key) => { return <li key={key}>{item}</li> })

  return(
    <ul className="gif-list">
      {tasks}
    </ul>
  );
}

export default TaskList;