React TodoList 深入指南：父子组件传值，新增删除，让你的待办事项更井井有条

前端

2023-12-08 17:11:03

父子组件通信：增强你的 React TodoList 应用

在构建交互式和可维护的前端应用程序时，组件之间高效通信至关重要。React 提供了一种强大且灵活的机制来实现父子组件之间的通信，使我们能够构建复杂而强大的用户界面。

父子组件通信简介

在 React 中，父子组件通信是通过 props 实现的。props 是父组件传递给子组件的数据，子组件可以通过 this.props 来访问这些数据。

要实现父子组件通信，需要在父组件中定义一个 state ，然后将此 state 作为 props 传递给子组件。子组件可以通过 this.props 访问此 state ，并根据需要进行渲染。

增强 TodoList 应用：新增和删除功能

让我们考虑一个 TodoList 应用的示例，我们希望实现新增和删除待办事项的功能。

新增功能

要实现新增功能，我们需要在子组件（TodoListItems）中添加一个输入框和一个按钮。当用户在输入框中输入内容并点击按钮时，子组件会将输入的内容发送给父组件（TodoList）。父组件收到输入的内容后，会将其添加到 state 中，并重新渲染组件。

删除功能

要实现删除功能，我们需要在子组件中添加一个删除按钮。当用户点击删除按钮时，子组件会将要删除的待办事项发送给父组件。父组件收到待办事项后，会将其从 state 中删除，并重新渲染组件。

代码示例

以下代码展示了如何使用 props 实现父子组件通信以及如何在 React 中实现新增和删除功能：

// 父组件 (TodoList.js)
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: []
    };
  }

  addTodo(todo) {
    this.setState({
      todos: [...this.state.todos, todo]
    });
  }

  deleteTodo(todo) {
    this.setState({
      todos: this.state.todos.filter(t => t !== todo)
    });
  }

  render() {
    return (
      <div>
        <TodoListItems todos={this.state.todos} deleteTodo={this.deleteTodo} />
        <AddTodo addTodo={this.addTodo} />
      </div>
    );
  }
}

// 子组件 (TodoListItems.js)
class TodoListItems extends React.Component {
  render() {
    return (
      <ul>
        {this.props.todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => this.props.deleteTodo(todo)}>删除</button>
          </li>
        ))}
      </ul>
    );
  }
}

// 子组件 (AddTodo.js)
class AddTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todo: ''
    };
  }

  handleChange(e) {
    this.setState({
      todo: e.target.value
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.addTodo(this.state.todo);
    this.setState({
      todo: ''
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.todo} onChange={this.handleChange} />
        <button type="submit">新增</button>
      </form>
    );
  }
}

// 渲染应用
ReactDOM.render(<TodoList />, document.getElementById('root'));