React中点击子组件元素时如何调用setTodoList更新父组件状态

核心逻辑是通过 React 父子组件的 props 通信，把父组件的状态更新方法传递给子组件，子组件触发点击事件时调用该方法即可。

1. 修改父组件 AddTodo #

首先在父组件中引入子组件，同时将setTodoList方法作为 props 传递给子组件：

import { useState } from 'react';
import Todos from './Todos'; // 按实际文件路径调整引入路径

const AddTodo = () => {
  const [todoList, setTodoList] = useState(['No active Todos']);

  // 可先封装更新逻辑，方便扩展校验、埋点等额外操作
  const handleUpdateTodoList = (newList) => {
    setTodoList(newList);
  };

  return (
    <div>
      {/* 父组件其他渲染内容 */}
      <Todos updateTodoList={handleUpdateTodoList} />
    </div>
  );
};

export default AddTodo;

2. 修改子组件 Todos #

子组件接收父组件传递的更新方法，绑定到<i>标签的onClick事件上，点击时传入你需要更新的新todoList数组即可：

export const Todos = (props) => {
  const handleClick = () => {
    // 示例为点击后清空todoList，可根据需求传入其他新数组
    props.updateTodoList([]);
    // 如果是删除特定待办项，可调整为类似写法：
    // props.updateTodoList(原数组.filter(item => item.id !== 要删除的项id))
  };

  return (
    <i 
      className="material-icons close_icon"
      onClick={handleClick}
    >
      clear
    </i>
  )
}

不需要额外封装逻辑的话也可以直接在行内调用：

<i 
  className="material-icons close_icon"
  onClick={() => props.updateTodoList([])}
>
  clear
</i>

小提示：React 中给 DOM 元素设置类名请使用className属性替换原生的class属性，避免和JS语法中的class关键字冲突。

内容的提问来源于stack exchange，提问作者Yash Sharma