Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.onChange = this.onChange.bind(this);
- const rows = Array.from({ length: 200 }, (v, k) => k + 1).map(i => ({
- id: i,
- field1: "hello",
- field2: "cruel",
- field3: "world"
- }));
- this.state = {
- selectedIds: [],
- rows
- };
- }
- onChange(e) {
- const name = e.target.name;
- const checked = e.target.checked;
- const selectedIds = [...this.state.selectedIds];
- if (!checked) {
- const index = selectedIds.findIndex(x => x === name);
- selectedIds.splice(index, 1);
- } else {
- selectedIds.push(name);
- }
- this.setState(state => ({ selectedIds }));
- }
- render() {
- const { rows, selectedIds } = this.state;
- return (
- <div className="App">
- <h5>{selectedIds.length} Rows Selected</h5>
- <table>
- <thead>
- <tr>
- <td>Select</td>
- </tr>
- <tr>
- <td>Field 1</td>
- </tr>
- <tr>
- <td>Field 2</td>
- </tr>
- <tr>
- <td>Field 3</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => {
- console.log(row);
- return (
- <tr key={row.id}>
- <td>
- <input
- type="checkbox"
- onChange={this.onChange}
- name={row.id}
- />
- </td>
- <td>
- <div>{row.field1}</div>
- </td>
- <td>
- <div>{row.field2}</div>
- </td>
- <td>
- <div>{row.field3}</div>
- </td>
- </tr>
- );
- })}
- </tbody>
- </table>
- </div>
- );
- }
- }
Add Comment
Please, Sign In to add comment