reactjs - react 处理多个复选框

Question

我做了一个 PoC 来查看如何处理动态复选框列表上的更改检测(注意，我事先不知道我有多少个复选框。)我创建了一个 ES6 映射(字典)来跟踪每个复选框的选中状态.但由于某种原因，我收到以下错误:

 A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

通常，当我知道表单输入字段的数量时，我会通过状态跟踪它们，但是如何处理这种情况。逻辑工作正常，但我需要摆脱错误。

我的应用程序代码:

    import React, { Component } from "react";
    import Checkbox from "./checkbox";

    class App extends Component {
        constructor(props) {
            super(props);

            this.state = {
                checkedItems: new Map()
            };

            this.handleChange = this.handleChange.bind(this);
        }

        handleChange = e => {
            const item = e.target.name;
            const isChecked = e.target.checked;
            this.setState(prevState => ({
                checkedItems: prevState.checkedItems.set(item, isChecked)
            }));
        };

        deleteCheckboxState = (name, checked) => {
            const updateChecked = typeof checked === "undefined" ? true : false;
            this.setState(prevState => prevState.checkedItems.set(name, updateChecked));
        };

        clearAllCheckboxes = () => {
            const clearCheckedItems = new Map();
            this.setState({ checkedItems: clearCheckedItems });
        };

        render() {
            const checkboxes = [
                {
                    name: "check-box-1",
                    key: "checkBox1",
                    label: "Check Box 1"
                },
                {
                    name: "check-box-2",
                    key: "checkBox2",
                    label: "Check Box 2"
                },
                {
                    name: "check-box-3",
                    key: "checkBox3",
                    label: "Check Box 3"
                },
                {
                    name: "check-box-4",
                    key: "checkBox4",
                    label: "Check Box 4"
                }
            ];

            const checkboxesToRender = checkboxes.map(item => {
                return (
                    <label key={item.key}>
                        {item.name}
                        <Checkbox
                            name={item.name}
                            checked={this.state.checkedItems.get(item.name)}
                            onChange={this.handleChange}
                            type="checkbox"
                        />
                    </label>
                );
            });

            const checkboxesDeleteHandlers = checkboxes.map(item => {
                return (
                    <span
                        key={item.name}
                        onClick={() =>
                            this.deleteCheckboxState(
                                item.name,
                                this.state.checkedItems.get(item.name)
                            )
                        }
                    >
                        {item.name} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    </span>
                );
            });

            return (
                <div className="App">
                    {checkboxesToRender}
                    <br /> {checkboxesDeleteHandlers}
                    <p onClick={this.clearAllCheckboxes}>clear all</p>
                </div>
            );
        }
    }

    export default App;

复选框可重用组件:

import React from "react";

class Checkbox extends React.Component {
    render() {
        return (
            <input
                type={this.props.type}
                name={this.props.name}
                checked={this.props.checked}
                onChange={this.props.onChange}
            />
        );
    }
}

export default Checkbox;

Answer 1

问题是checked状态最初是undefined ，这是一个假值，但解释为未提供。

所以你可以简单地通过使用 !! 来确保假状态实际上是假的。 .

所以换行
checked={this.state.checkedItems.get(item.name)}
对此
checked={!!this.state.checkedItems.get(item.name)}