0

Столкнулся с такой проблемой: в анкете пользователя необходимо реализовать чекбоксы. Искал какое-либо простое решение, но сейчас пока сделал вот так:


import Checkbox from '../UI/Checkbox/Checkbox';
class Profile extends React.Component {
  state = {
        checkedItems: new Map(),
        dopWork: [
                { name: '1', label:'1', key: 'box1', active: false },
                { name: '2', label:'2',key: 'box2',active: false },
                { name: '3', label:'3',key: 'box3',active: false },
                { name: '4', label:'4',key: 'box4',active: false },
                { name: '5',label:'5', key: 'box5',active: false },
                { name: '6', label:'6',key: 'box6',active: false },
                { name: '7', label:'7',key: 'box7',active: false },
            ]}
//обрабатываю изменения чекбоксов
    handleChange = (e) => {
        const item = e.target.name;
        const isChecked = e.target.checked;
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
        console.log(this.state.checkedItems) 
    }
// отрисовываю чекбоксы
  checkBoxRender = () =>{
         return (
            <div className={classes.checkbox}>

            {
              this.state.dopWork.map(item => (
                <label key={item.key}>

                  <Checkbox name={item.name} checked={this.state.checkedItems.get(item.name)} onChange={this.handleChange} />
                  {item.name}
                </label>
              ))
            }
         </div>
         )
     }


}

В таком виде чекбоксы работают, состояние изменяется. Но в объекте Map у нас идет коллекция элементов {'Название пункта', активность}. И я не могу разобраться как это привести в вид который годится для сервера? Т.е. у меня туда сейчас улетают строки и среди них есть объект Map. Это нормально или лучше перед отправкой преобразовать данные из Map? И вообще, можно ли отказаться от Map в пользу какого-либо более простого решения? Просто с Map ранее не сталкивался, и по этому не знаю нужен ли вообще он тут... Заранее большое спасибо.

1 ответ 1

0

Для более удобной работы с чекбоксами и отображением элементов на странице, используйте Material-UI. https://material-ui.com/components/checkboxes/ В данной библиотеке можно реализовать функционал чекбоксов, не заморачиваясь с маппингом элементов и их созданием.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.