在reactJs中单击删除按钮时如何删除多选复选框

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>