Несколько вариантов флажков в ReactJS

Я новичок в реагировании, и у меня были проблемы с созданием флажков для моего приложения. Мне удалось настроить что-то, что работает только для одного флажка, однако проблема, с которой я столкнулся сейчас, связана с несколькими вариантами флажка.

Всякий раз, когда я нажимаю на один флажок, он автоматически устанавливает все остальные флажки.

Вот код, над которым я сейчас работаю.

import React, { Component, } from 'react';

export default class Checkbox extends Component {
    constructor(props) {
        super();

        let initialState = {
            options: [{ id: 1, answer: 'Apple' }, { id: 2, answer: 'Bananas' }, { id: 3, answer: 'Oranges' }],
            isChecked: false,
        };
        this.state = initialState;
    }

    handleCheckbox() {
        this.setState({
            isChecked: !this.state.isChecked
        })
    }

    render() {
        return (
            <div>
                {
                    [...this.state.options].map((e, i) => {
                        return (
                            <label key = {e.id}>
                                <input type = "checkbox"

                                    disabled = {this.props.disabled}

                                    onChange = {() => this.handleCheckbox()}

                                    checked = {this.state.isChecked}

                                    key = {e.id} 
                                />

                                {e.answer} &nbsp;
                          </label>
                        )
                    })
                }
            </div>
        )

    }

}

Да, потому что вы задекларировали только один isCheck, поэтому он будет проверять все

— 28.05.2019 11:21

проверьте этот ответ, это подробный ответ, и он содержит все, что вам нужно stackoverflow.com/questions/31073281/…

— 28.05.2019 11:23

reactjs

28.05.2019 11:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

116

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны изменить свой код, как показано ниже:

import React, { Component, } from 'react';

export default class Checkbox extends Component {
    constructor(props) {
        super();

        let initialState = {
            options: [{ id: 1, answer: 'Apple', isChecked: false }, { id: 2, answer: 'Bananas', isChecked: false }, { id: 3, answer: 'Oranges', isChecked: false }],
       };
        this.state = initialState;
    }

    handleCheckbox(id) {
       const modifiedOptions = [...this.state.options];
       modifiedOptions[id].isChecked = !modifiedOptions[id].isChecked;

    this.setState({
        options: modifiedOptions
    })
    }

    render() {
        return (
            <div>
                {
                    [...this.state.options].map((e, i) => {
                        return (
                            <label key = {e.id}>
                                <input type = "checkbox"

                                    disabled = {this.props.disabled}

                                    onChange = {() => this.handleCheckbox(e.id)}

                                    checked = {e.isChecked}

                                    key = {e.id} 
                                />

                                {e.answer} &nbsp;
                          </label>
                        )
                    })
                }
            </div>
        )

    }

}

Идентификатор handleCheckbox(id) будет undefined

— 28.05.2019 11:27

id не всегда равно, как индекс

— 28.05.2019 11:30

В этом случае он будет равен, так как мы создаем объект с разными идентификаторами.

— 28.05.2019 11:32

То же решение, что и у Вадима. Спасибо!

— 28.05.2019 11:43

Я добавил этот первый @GJosh... В любом случае, ваша проблема решена, это важно...

— 28.05.2019 11:54

28.05.2019 11:25

Ответ принят как подходящий

Вам нужно переместить isChecked внутри вариантов:

import React, { Component, } from 'react';

export default class Checkbox extends Component {
    constructor(props) {
        super();

        let initialState = {
            options: [{ id: 1, answer: 'Apple', isChecked:false }, { id: 2, answer: 'Bananas', isChecked:false }, { id: 3, answer: 'Oranges', isChecked:false }],
        };
        this.state = initialState;
    }

    handleCheckbox(ind) {
        const newOptions = [...this.state.options];

        newOptions[ind].isChecked = !newOptions[ind].isChecked;

        this.setState({
            options: newOptions
        })
    }

    render() {
        return (
            <div>
                {
                    [...this.state.options].map((e, i) => {
                        return (
                            <label key = {e.id}>
                                <input type = "checkbox"

                                    disabled = {this.props.disabled}

                                    onChange = {() => this.handleCheckbox(i)}

                                    checked = {e.isChecked}

                                    key = {e.id} 
                                />

                                {e.answer} &nbsp;
                          </label>
                        )
                    })
                }
            </div>
        )

    }

}

28.05.2019 11:26

Другие вопросы по теме

Как импортировать файл js из файла src в index.html?

Как установить массив в React Native

React Axios: иногда состояние не проходит по событию onClick

Как встроить текстовое представление в реагирующие карты Google?

ComponentDidMount не получает значение реквизита

Ошибка 501 Not Implemented в небольшом веб-приложении

Маршрутизация реакции на событие клика не работает

Есть ли способ записать файл на сервер в одностраничном приложении?

Приложение React показывает пустую страницу при загрузке на Github с использованием метода развертывания npm run

Выполняется многократная итерация для создания общих фильтров

Несколько вариантов флажков в ReactJS

Ответы 2

Другие вопросы по теме

Похожие вопросы