ReactJS中的多个复选框选项

Question

我对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>
        )

    }

}

Answer 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>
        )

    }

}

Answer 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>
        )

    }

}