从表中删除选定的项目。反应

Question

我需要单击按钮来删除选中复选框的行。 我不知道如何使用过滤器方法。我阅读了文档，但那里的信息很少。帮我改正代码

 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>
          );
        }
      }

要删除的项目所在的第二个文件

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

Answer 1

我已更改您的沙箱并添加了一些功能以删除行。

比较基于全名，但您可以将其更改为适合您需要的任何名称。

https://codesandbox.io/s/keen-silence-i51wz

Answer 2

在您的 handleDelete 函数中，您的过滤条件似乎错误

目前你有：

// Filters all droplets that have an id different to the value of isChecked.
const filteredDroplets = droplets.filter(item => item.id !== isChecked);

应该是的

// Returns all the droplets that are not checked
// Meaning that all the checked items are dropped from the array
const filteredDroplets = droplets.filter(item => !item.isChecked);