首页 > 解决方案 > React js - 如何从 HTML 表中选择所有行 ID

问题描述

我试图通过单击选择包含在 html 表中的所有行 ID 我试图这样做但该功能不起作用并且数组列表显示为空如何做到这一点我可以通过单个复选框选择所有行 ID 我想要所有行idselectedItems作为列表形式。这是我做的代码。

this.state = {
      checkedBoxCheck: false,
     selectedItems: [],
stats: [],
}

 componentDidMount() {
    ...
  }



toggleSelectAll() {
    let selectedItems = [];

    if (this.state.selectAll === 0) {
      this.state.stats.forEach(x => {
        selectedItems[x.id] = true;
      });
    }
    this.setState({
      selectedItems: selectedItems,
      checkedBoxCheck: true
    });

    console.log(selectedItems);
  }


           <thead>
                <tr style={{ marginTop: "-88px" }}>
                  <th class="active" style={{ width: "20px" }}>
                    <input
                      type="checkbox"
                      class="select-all checkbox"
                      onChange={this.onChange}
                      name="first_name"
                      onClick={this.toggleSelectAll.bind(this)}
                    />
                  </th>
                  <th className="" style={{ width: "20px" }}>
                    {t("Id")}
                  </th>
           </thead>
           <tbody>
                {stats.map((c, i) => (
                  <tr key={c.id}>
                    <td>
                      <input
                        type="checkbox"
                        id="togBtn"
                        className="checkbox"
                        name="selectOptions"
                        onClick={() => this.onItemSelect(c.id)}
                      />
                    </td>
                    <td>{c.id}</td>
             </tbody>

标签: javascriptreactjs

解决方案


推荐阅读