mercredi 23 juin 2021

remove the selected item from the Table. React

I need to click on the button to delete the line with the selected checkbox. I don't know how to use the filter method. I read the documentation, but there is little information there. help me correct the code

 class Table extends Component {
        constructor(props) {
          super(props);
          this.state = {
            droplets: [],
            allSelected: false,
            isChecked: false
          }
          this.toggleSelectAll = this.toggleSelectAll.bind(this);
          this.toggleSelect = this.toggleSelect.bind(this);
          this.handleChecked = this.handleChecked.bind(this);
          **this.handleDelete = this.handleDelete.bind(this);**
        }
        async componentDidMount() {
          const res = await fetch('http://api.npoint.io/324f4ca2cdd639760638');
          const droplets = await res.json();
          this.setState({ 'droplets': droplets })
        }
        
        toggleSelect(dropletToToggle) {
          this.setState({isChecked: !this.state.isChecked});
          this.setState((prevState) => {
            const newDroplets = prevState.droplets.map((dplt) => {
              if (dplt === dropletToToggle) {
                return { ...dplt, checked: !dplt.checked };
              }
              return dplt;
            });
      
            return {
              ...prevState,
              droplets: newDroplets,
              allSelected: newDroplets.every((d) => !!d.checked)
            };
          });
        }
      
        
        toggleSelectAll() {
          this.setState({isChecked: !this.state.isChecked});
          this.setState((prevState) => {
            const toggle = !prevState.allSelected;
            const newDroplets = prevState.droplets.map((x) => ({
              ...x,
              checked: toggle
            }));
            
            return {
              ...prevState,
              droplets: newDroplets,
              allSelected: toggle
            };
          });
        }
        handleChecked () {
          this.setState({isChecked: !this.state.isChecked});
        }
       
    
        **handleDelete = isChecked => {
          this.setState(state => {
            const { droplets } = state;
            const filteredDroplets = droplets.filter(item => item.id !== isChecked);
            return {
              droplets: filteredDroplets
            };
          });
        };**
    
        render() {
          
          return (
            <div className="body">
              <div className="title">Таблица пользователей</div>
              <table className="panel">
                <Tablehead
                  toggleSelectAll={this.toggleSelectAll}
                  allSelected={this.state.allSelected}
                />
                <tbody className="row">
                  <TableBody
                    droplets={this.state.droplets}
                    toggleSelect={this.toggleSelect}
                  />
                </tbody>
              </table>
              **<button className="button" onClick = {this.handleDelete} >Удалить выбранные</button>**
            </div>
          );
        }
      }

the second file in which the item to delete

const TableBody = ({ droplets, toggleSelect}) => {

  return (
    <>
      {droplets.map((droplet, item) => (
        <tr className={s.area} key={item.id} > 
          <td>
            <Checkbox
              handleClick={() => toggleSelect(droplet)}
              isChecked={!!droplet.checked}
            />
          </td>
          <td>{droplet.num}</td>
          <td>{droplet.first_name + " " + droplet.last_name}</td>
          <td>{date_form(droplet.date_of_birth)}</td>
          <td>{height_form(droplet.height)}</td>
          <td>{weight_form(droplet.weight)}</td>
          <td>{salary_form(droplet.salary)}</td>
          <td>
            <button type="submit" className={s.button}>
              <Edit />
            </button>
          </td>
          <td>
            <button type="submit" className={s.button}>
              <Trash />
            </button>
          </td>
        </tr>
      ))}
    </>
  );
};

https://codesandbox.io/s/sweet-butterfly-0s4ff?file=/src/Table.jsx




Aucun commentaire:

Enregistrer un commentaire