Javascript 复选框在react js中不起作用

动态创建时，不会选中我的复选框。我找不到问题所在。尽管如此，当我硬编码

复选框id的值和
标签的值时，它仍然有效

var category_list = this.props.categories_list.map(function(name, i) {
        // debugger
        return (
            <div className="group-chkbx list-group-item">
                <input key={i+11} type="checkbox" id={name.category_id} name="category" />
                <label htmlFor={name.category_id}>{name.name}</label>
            </div>
        )
    });

var category\u list=this.props.categories\u list.map（函数名，i）{
//调试器
返回(
{name.name}
)
});
无论如何，没有任何东西可以设置选中的
道具。什么时候检查

（另外，请记住数组中的组件（例如
.map
返回的内容）。
输入的checked属性将控制是否选中它。通常我使用本地状态（或来自全局redux状态的东西来控制所检查的内容）。小例子：

class Something extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: 0
        }

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

    handleChange(e) {
        // Do Stuff
    }

    render() {
        return (
            <div>
                {
                    this.props.categories_list.map(function(name, i) {
                        return (
                            <div className="group-chkbx list-group-item" key={i}>
                                <input checked={i === this.state.checked} onChange={this.handleChange} type="checkbox" id={name.category_id} name="category" />
                                <label htmlFor={name.category_id}>{name.name}</label>
                            </div>
                        )
                    });
                }
            </div>
        );
    }
}

class.com组件{
建造师（道具）{
超级（道具）；
此.state={
勾选：0
}
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
//做事
}
render（）{
返回(
{
this.props.categories\u list.map（函数（名称，i）{
返回(
{name.name}
)
});
}
);
}
}
如果您的复选框未被选中，很可能是其他功能阻止了它

下面是如何获取复选框值的示例：

class WithChecks extends Component {
    constructor(props){
        super(props);
        this.getValue = this.getValue.bind(this);
    }
    getValue(e){
        const chk = e.target;
        console.log(chk.checked);
        console.log(chk.value);
    }

    render() {
        const arr = ['a', 'b', 'c', 'd'];
        return (
            <div>
                {
                    arr.map((value, index) => {
                        return (
                            <div key={index}>
                                <input type="checkbox" 
                                       id={'chk' + index} 
                                       onChange={this.getValue}
                                       name="category" 
                                       value={value} />
                                <label htmlFor={'chk' + index}>{value}</label>
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

使用检查扩展组件的类{
建造师（道具）{
超级（道具）；
this.getValue=this.getValue.bind（this）；
}
getValue（e）{
常数chk=e.target；
控制台日志（已检查）；
控制台日志（chk.value）；
}
render（）{
常数arr=['a'，'b'，'c'，'d']；
返回(
{
arr.map（（值，索引）=>{
返回(
{value}
);
})
}
);
}
}

也许这有助于澄清问题。
经过大量研究，我的一位同事帮我找到了解决方案。
和
id
的
htmlf必须相同，
但不能仅为数字。我使用的ID是纯数字的。当我添加字母作为前缀时，它开始像魅力一样工作。感谢大家在这里表现出的兴趣和帮助。
您的意思是，当您单击复选框时，它不会显示复选标记吗？或者您无法获取值（已选中/未选中）？是的，它没有在复选框上打上复选标记我也为复选框添加了唯一的键，但仍然存在相同的问题。