React实现点击按钮全选/取消全选复选框的方法

关键修改步骤： #

• 修复构造函数语法错误：原代码中constructor(props) ;的分号是语法错误，需改为constructor(props) {
• 添加全选/取消全选方法：新增handleSelectAll和handleClearAll方法，更新checkedItems状态
• 绑定方法到组件实例：在构造函数中绑定新增的方法
• 关联复选框选中状态：给复选框添加checked属性，根据checkedItems数组判断是否选中
• 给按钮绑定点击事件：为"Select All"和"Clear All"按钮添加onClick事件

修改后的完整代码： #

import React from "react";

export class Delete_Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Template_ID: "",
      TemplateName: "",
      Templatelist: [],
      checkedItems: [],
      loading: true // 补充初始loading状态
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSelectAll = this.handleSelectAll.bind(this);
    this.handleClearAll = this.handleClearAll.bind(this);
  }

  componentDidMount() {
    this.getTemplateList();
  }

  getTemplateList() {
    // 需确保REQUEST_URL已定义
    fetch(REQUEST_URL, { credentials: 'include' })
      .then(response => response.json())
      .then((data) => {
        this.setState({
          Templatelist: data,
          TemplateName: data[0].templateName,
          loading: false
        });
        console.log(this.state.Templatelist);
      })
      .catch(err => {
        console.error('获取模板列表失败:', err);
        this.setState({ loading: false });
      });
  }

  handleChange(event) {
    const id = parseInt(event.target.id, 10);
    const index = this.state.checkedItems.indexOf(id);
    const updatedArray = [...this.state.checkedItems];
    if (index !== -1) {
      updatedArray.splice(index, 1);
    } else {
      updatedArray.push(id);
    }
    this.setState({ checkedItems: updatedArray }, () => {
      // setState是异步操作，回调中打印最新状态
      console.log(this.state.checkedItems);
    });
  }

  handleSelectAll() {
    // 提取所有模板ID转为数字后赋值给checkedItems
    const allIds = this.state.Templatelist.map(item => parseInt(item.templateID, 10));
    this.setState({ checkedItems: allIds });
  }

  handleClearAll() {
    this.setState({ checkedItems: [] });
  }

  render() {
    if (this.state.loading) {
      return <div>加载中...</div>;
    }

    return (
      <div>
        <ul style={{ listStyle: 'none' }}>
          {this.state.Templatelist.map((item) => {
            const itemId = parseInt(item.templateID, 10);
            return (
              <li key={item.templateID}>
                <input
                  type="checkbox"
                  id={item.templateID}
                  value={item.templateName}
                  onChange={this.handleChange}
                  checked={this.state.checkedItems.includes(itemId)}
                />
                &nbsp; {item.templateName}
              </li>
            );
          })}
        </ul>

        &nbsp;&nbsp;
        <input type="button" name="SelectAll" value="Select All" onClick={this.handleSelectAll} />
        &nbsp;&nbsp;
        <input type="button" name="UnSelectAll" value="Clear All" onClick={this.handleClearAll} />
      </div>
    );
  }
}

export default Delete_Item;

代码说明： #

• 全选逻辑：handleSelectAll遍历模板列表，提取所有templateID转为数字后赋值给checkedItems，实现全选
• 取消全选逻辑：handleClearAll直接将checkedItems设为空数组，清空所有选中状态
• 复选框状态同步：通过checked={this.state.checkedItems.includes(itemId)}判断当前复选框是否选中，确保视图与状态一致
• 异步状态处理：将console.log移到setState回调中，保证打印最新状态
• 错误处理：给fetch添加catch块，处理请求失败的情况，避免页面一直处于加载状态

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