Question

动态创建时，我的复选框未被检查。我无法找到问题所在。但是，当我对check box id和label for的值进行硬编码时，它才有效。

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>
        )
    });

Answer 1

无论如何，没有什么可以设置checked道具。什么时候应该检查？

（另外，请记住数组中的组件（例如.map返回的内容）should have unique key props。）

Answer 2

经过大量研究，我的一位同事帮助我解决了问题。 htmlFor和id必须相同，but cannot be only numeric。我正在使用的ID是纯粹的数字。当我添加字母作为前缀时，它开始像魅力一样工作。感谢所有人在这里表现出兴趣和帮助。

Answer 3

输入的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>
        );
    }
}

Answer 4

如果您的复选框没有选中，则很可能是其他一些功能阻止了它。
这里以及如何获取复选框值的示例：

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>
        );
    }
}

也许这有助于澄清。

复选框不起作用反应js

4 个答案: