Guest User

Untitled

a guest
Nov 19th, 2018
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.88 KB | None | 0 0
  1. class App extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.onChange = this.onChange.bind(this);
  5. const rows = Array.from({ length: 200 }, (v, k) => k + 1).map(i => ({
  6. id: i,
  7. field1: "hello",
  8. field2: "cruel",
  9. field3: "world"
  10. }));
  11.  
  12. this.state = {
  13. selectedIds: [],
  14. rows
  15. };
  16. }
  17.  
  18. onChange(e) {
  19. const name = e.target.name;
  20. const checked = e.target.checked;
  21. const selectedIds = [...this.state.selectedIds];
  22. if (!checked) {
  23. const index = selectedIds.findIndex(x => x === name);
  24. selectedIds.splice(index, 1);
  25. } else {
  26. selectedIds.push(name);
  27. }
  28. this.setState(state => ({ selectedIds }));
  29. }
  30.  
  31. render() {
  32. const { rows, selectedIds } = this.state;
  33. return (
  34. <div className="App">
  35. <h5>{selectedIds.length} Rows Selected</h5>
  36. <table>
  37. <thead>
  38. <tr>
  39. <td>Select</td>
  40. </tr>
  41. <tr>
  42. <td>Field 1</td>
  43. </tr>
  44. <tr>
  45. <td>Field 2</td>
  46. </tr>
  47. <tr>
  48. <td>Field 3</td>
  49. </tr>
  50. </thead>
  51. <tbody>
  52. {rows.map(row => {
  53. console.log(row);
  54. return (
  55. <tr key={row.id}>
  56. <td>
  57. <input
  58. type="checkbox"
  59. onChange={this.onChange}
  60. name={row.id}
  61. />
  62. </td>
  63. <td>
  64. <div>{row.field1}</div>
  65. </td>
  66. <td>
  67. <div>{row.field2}</div>
  68. </td>
  69. <td>
  70. <div>{row.field3}</div>
  71. </td>
  72. </tr>
  73. );
  74. })}
  75. </tbody>
  76. </table>
  77. </div>
  78. );
  79. }
  80. }
Add Comment
Please, Sign In to add comment