复选框在 React 中不保留状态

Question

当我单击标签面板中的复选框时，它会按预期被选中。但是当我切换到另一个面板，然后再切换回来时，我发现应该选中的复选框变成了未选中。我该如何解决这个问题？

这是我的代码，我使用来自 npm 的 react-tab-panel。

Container:

export default class Container extends Component {
    static propTypes = {
    };
    constructor(props) {
        super(props);
        this.state = {
            chosenItem: {
                a: [],
                b: [],
                c: [],
                d: []
            }
        };
    }

    handleCheckBoxChange = (e) => {
        const value = e.target.value;
        const item = e.target.attributes.getNamedItem('data-tag').value;
        const chosenItem = this.state.chosenItem;
        const index = chosenItem[item].indexOf(value);
        if (index > -1) {
            chosenItem[item].splice(index, 1);

        }
        chosenItem[item].push(value);

    }

    render() {
        return (
            <div>
                <Panel
                    handleCheckBoxChange={this.handleCheckBoxChange}

                />
            </div>
        );
    }
}

Panel:

import TabPanel from 'react-tab-panel';
import 'react-tab-panel/index.css';
import CheckBox from './CheckBox.jsx';

export default function Panel({

    handleCheckBoxChange
}) {
    const tabList = {
        a: ['1', '2'],
        b: ['1', '2'],
        c: ['1', '2'],
        d: ['1', '2']
    };

    return (
        <TabPanel
            tabPosition="left"
        >
        {
            Object.keys(tabList).map((key) => {
                return (
                    <form
                        key={key}
                        tabTitle={key}
                    >
                    {
                        tabList[key].map((item) =>
                            <CheckBox
                                key={item}
                                value={item}
                                handleCheckBoxChange={handleCheckBoxChange}
                                tag={key}
                            />
                        )
                    }
                    </form>
                );
            })
            }
        }
        </TabPanel>
    );
}

Checkbox:

export default function CheckBox({
    tag,
    value,

    handleCheckBoxChange
}) {
    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    value={value}

                    onChange={handleCheckBoxChange}
                    data-tag={tag}
                />
                {value}
            </label>
        </div>
    );
}

Answer 1

您应该考虑使用Flux 或Redux 来存储您的应用程序状态树。