Question

对不起，如果这是一个经常出现的问题，但这是我一直在努力去理解的事情。

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

容器当前包含一个接收信息的表单，并在状态中添加输入项目数组的每个项目。然后，我有一个＆＃39; TaskList＆＃39;采用此状态并呈现我的任务的组件。

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

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

有没有办法让一个组件可以更新其父组件的状态。我的源代码在下面供参考。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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;

＆＃13;

<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>

＆＃13;

Answer 1

你可以这样做。将将状态更改为props的父函数传递给表单组件。在表单句柄提交功能中，将父函数调用为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;

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

1 个答案: