Как удалить несколько выбранных флажков при нажатии кнопки удаления в реагировать

Question

У меня есть несколько флажков и одна кнопка удаления в верхней части.После выбора я должен снять выбранные флажки.Как я могу сделать это в React Js.

Answer 1

Попробуйте это:

class App extends React.Component {
  state = {
      list: [
        { id: 1, label: 'Reading', value: false },
        { id: 2, label: 'Playing game', value: false },
        { id: 3, label: 'Listening to music', value: false },
        { id: 4, label: 'Watching TV', value: true }
      ]
  };

  handleChange = e => {
    const id = e.target.id;
    this.setState(prevState => {
      return {
        list: prevState.list.map(
          li => (li.id === +id ? { ...li,
            value: !li.value
          } : li)
        )
      };
    });
  };
  handleClick = () => {
    this.setState(prevState => {
      return {
        list: prevState.list.filter(li => !li.value)
      };
    });
  };
  render() {
    return (
      <div className="App">
        {this.state.list.map(e => (
          <div key={e.id}>
            <input
              type="checkbox"
              id={e.id}
              checked={e.value}
              onChange={this.handleChange}
            />
            <label htmlFor={e.id}>{e.label}</label>
          </div>
        ))}
        <button onClick={this.handleClick}>Delete</button>
      </div>
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>