如何在React中从其子组件之一更新容器组件的状态？

Question

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

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

容器当前包含一个接受信息的表格，并在状态下添加输入的每个项目数组。 然后，我有一个'TaskList'组件，该组件采用此状态并呈现我的任务。

我要做的是创建一个单独的表单组件，而不是将表单包含在容器中。

问题是，如果我仅将表单的代码复制到新组件中，它将修改的状态是它自己的状态，因此无法通过TaskList组件访问以呈现任务列表。

有什么办法可以使组件更新其父组件的状态。 我的源代码在下面供参考。

 export default class Container extends React.Component { constructor() { super(); this.handleSubmit = this.handleSubmit.bind(this); this.state = { items: [] } } handleSubmit(e) { e.preventDefault(); var itemsArray = this.state.items; itemsArray.push(e.target.elements.task.value); this.setState({ items: itemsArray }) e.target.reset(); } render() { return ( <div className=""> <header className="header">TODO</header> <form onSubmit={this.handleSubmit}> <input name="task" placeholder="Task"></input> <button type="submit">Add</button> </form> <TaskList data={this.state.items} /> </div> ); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

 const TaskList = props => { var tasks = (props.data).map( (item, key) => { return <Task data={item} key={key} /> }) return( <ul className="gif-list"> {tasks} </ul> ); } export default TaskList; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 1

您可以这样进行。 将更改状态的父函数作为道具传递给表单组件。 在表单句柄this.props.addTodo(todoText)函数中，将父函数称为this.props.addTodo(todoText) 。

Container.js

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>
    );
  }
}

Form.js

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>
    );
  }
}

TaskList.js

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;