ReactJS 中的多个复选框选项答案

【问题标题】：Multiple check box options in ReactJSReactJS 中的多个复选框选项
【发布时间】：2019-10-13 18:48:02
【问题描述】：

我对 react 很陌生，在为我的应用程序创建复选框时遇到了问题。我能够设置仅适用于一个复选框选项的东西，但是我现在遇到的问题是多个复选框选项。

当我点击一个复选框时，它会自动选中所有其他复选框

这是我目前正在处理的代码。

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，所以它会检查所有
检查这个答案它是详细的答案，它包含你需要的一切stackoverflow.com/questions/31073281/…

标签： reactjs

【解决方案1】：

您必须按以下方式更改您的代码：

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) id 将是undefined
id 并非每次都像索引一样
在这种情况下，它将是相等的，因为我们正在创建具有不同 ID 的对象
与 Vadim 的解决方案相同。谢谢！
我已经添加了第一个@GJosh...无论如何你的问题解决了这很重要...

【解决方案2】：

您需要在选项中移动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>
        )

    }

}

【讨论】：