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

Question

I have multiple check boxes and a single delete button at the top. After making the selection I should remove the selected check-boxes . How can I do that in React Js .

Answer 1

Try this:

 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>