當在react js中選中復選框時，無法獲取值

Question

我有一個表格，其中標題有一個帶SelectAll屬性的復選框，表格中的每一行都有一個復選框，單個和全部選中復選框都正常工作，現在我試圖在選中時獲取Id值，但即使我分析了它，它被添加到數組中。

以下是我到目前為止所嘗試的內容：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Table from "react-bootstrap/Table";

import "./styles.css";

const exampleData = [
  { Id: 1, Name: "name 1", Source: "source 1", Number: "number 1" },
  { Id: 2, Name: "name 2", Source: "source 2", Number: "number 2" },
  { Id: 3, Name: "name 3", Source: "source 3", Number: "number 3" },
  { Id: 4, Name: "name 4", Source: "source 4", Number: "number 4" },
  { Id: 5, Name: "name 5", Source: "source 5", Number: "number 5" }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      selectAll: false,
      items: exampleData.map(item => ({ ...item, checked: false }))
    };
  }
  selectAll = () => {
    this.setState({ selectAll: !this.state.selectAll }, () => {
var collection = [];
    for (const item of this.state.items) {
        collection.push(item.Id);
      }

      let items = [...this.state.items];
      items = items.map(item => {
        return {
          ...item,
          checked: this.state.selectAll
        };
      });
      this.setState({ items });
    });
  };
  handleTransClick = (e, id) => {
    e.preventDefault();
    alert("You clicked row #" + id);
  };
  handleCheckbox = id => {
var collection2 = [];
collection2.push(id);
    this.setState({
      items: this.state.items.map(item => {
        return {
          ...item,
          checked: item.Id === id ? !item.checked : item.checked
        };
      })
    });
  };
  render() {
    const result = this.state.items;
    return (
      <Table striped bordered className="App">
        <thead>
          <tr>
            <th className="col-md-2">
              <input
                onChange={this.selectAll}
                type="checkbox"
                checked={this.state.selectAll}
              />
            </th>
            <th>Id</th>
            <th>Name</th>
            <th>Source</th>
            <th>Number</th>
          </tr>
        </thead>
        <tbody>
          {result.map((item, i) => (
            <tr key={i}>
              <td className="col1">
                <input
                  type="checkbox"
                  name={item.Name}
                  checked={item.checked ? true : ""}
                  onChange={this.handleCheckbox.bind(this, item.Id)}
                />
              </td>
              <td className="col2">
                <a href="" onClick={e => this.handleTransClick(e, item.Id)}>
                  {item.Id}
                </a>
              </td>
              <td className="col3">{item.Name}</td>
              <td className="col4"> {item.Source}</td>
              <td className="col5"> {item.Number}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何根據復選框的選中值控制它們？

Answer 1

      else{

  this.setState({
    items : this.state.items.filter(function(val) {return val!==value})
  })

}

Answer 2

你在handleCheckbox方法的開頭有一些不相關的代碼，但這不會阻止它工作。 我看到的唯一潛在問題是，由於setState的異步性質，你應該使用this.setState的函數參數：

handleCheckbox = id => {
  this.setState(state => {
    items: state.items.map(item => ({
      ...item,
      checked: item.Id === id ? !item.checked : item.checked
    }))
  });
};