У меня есть список элементов, каждый со своими флажками, и я решил попробовать добавить флажок «выбрать все», чтобы пользователю было проще выбрать их все сразу.
К сожалению, мне трудно разобраться в логике «Реагировать».
Я нашел JSBIN о том, как бы я хотел, чтобы результат работал - https://jsbin.com/jetalaxaha/edit?html,js,output
примечание: это настроено не так, как хотелось бы.
Мой текущий код здесь:
<code>import React, { Component } from "react";
import ReactDOM from "react-dom";
class Items extends Component {
state = {
categories: [
{
id: 1,
name: "category 1",
items: [
{ name: "item 1", id: Math.floor(Math.random() * 99999) },
{ name: "item 2", id: Math.floor(Math.random() * 99999) }
]
},
{
id: 2,
name: "category 2",
items: [
{ name: "item 3", id: Math.floor(Math.random() * 99999) },
{ name: "item 4", id: Math.floor(Math.random() * 99999) }
]
},
{
id: 3,
name: "category 3",
items: [
{ name: "item 5", id: Math.floor(Math.random() * 99999) }
]
}
],
checkedListAll: [],
ItemsChecked: false
};
selectedItems(e) {
const { value, checked } = e.target;
let { checkedListAll } = this.state;
if (checked) {
checkedListAll = [...checkedListAll, value];
} else {
checkedListAll = checkedListAll.filter(el => el !== value);
if (this.state.ItemsChecked) {
this.setState({
ItemsChecked: !this.state.ItemsChecked
});
}
}
this.setState({ checkedListAll });
}
selectItem(e) {
const { checked } = e.target;
const { categories } = this.state;
const collection = [];
if (checked) {
this.setState(
{
checkedListAll: []
},
() => {
for (const cat of categories) {
for (const item of cat.items) {
collection.push(item.id);
}
}
this.setState({
checkedListAll: collection
});
}
);
} else {
this.setState({
checkedListAll: []
});
}
this.setState({
ItemsChecked: !this.state.ItemsChecked
});
}
render() {
const { categories, checkedListAll, ItemsChecked } = this.state;
return (
<div>
<header>
<label>
<input
type="checkbox"
checked={ItemsChecked}
onClick={this.selectItem.bind(this)}
/>Select all
</label>
</header>
{categories.map(cat => {
return (
<ItemCategory
{...cat}
key={cat.id}
click={this.openModal}
selectedItems={this.selectedItems.bind(this)}
ItemsChecked={ItemsChecked}
/>
);
})}
{
<pre>
All Selected: {JSON.stringify(ItemsChecked, null, 2)}
}
{
Selected List: {JSON.stringify(checkedListAll, null, 2)}
}
);
}
}
Класс ItemCategory extends Component {
render () {
const {items, name, selectedItems, ItemsChecked} = this.props;
const getItems = items.map (item => {
вернуть изделие;
});
вернуть (
);
}
}
Флажок класса расширяет Компонент {
состояние = {
isChecked: ложь
};
componentDidUpdate (prevProps) {
if (prevProps.ItemsChecked! == this.props.ItemsChecked) {
this.setState ({
isChecked:! this.state.isChecked
});
}
}
handleClick (e) {
e.persist ();
if (this.props.ItemsChecked) {
console.log (истина);
}
this.setState (
{
isChecked:! this.state.isChecked
},
() => {
this.props.selectedItems (е);
}
);
}
render () {
const {item} = this.props;
const {isChecked} = this.state;
console.log (this.props.ItemsChecked);
вернуть (
);
}
}
function App () {
возврат ;
}
const rootElement = document.getElementById ("root");
ReactDOM.render (, rootElement);
Также доступно в виде кодов и коробки - https://codesandbox.io/s/r44yn2rwm4
Текущие нерешенные проблемы / дополнительные функциональные возможности, которые будут добавлены:
- Нажатие на флажок «выбрать все», затем снятие одного из флажков элемента отменяет выбор остальных.
- Выбирая все элементы по отдельности, отметьте флажок «выбрать все»
- Исправить коллекцию ID «Выбранный список»
Буду признателен за любую помощь в этом, некоторое время работал над этим и исчерпал все возможности!
Спасибо:)