javascript - 如何组织多个复选框？

Question

我想组织多个复选框。我决定将所选框的 id 数组保留在状态中。并使用方法希望给它们“已选中”状态。

constructor(props) {
        super(props);
        this.state = {
            checkboxes: []
        }
    }

for(let i=0; i<checkboxData.length; i++) {
            checkboxes.push(
                <List.Item key = { checkboxData[i].id }>
                    <div className="ui checkbox">
                        <input type="radio"
                               id={checkboxData[i].id}
                               checked={ ()=>this.getCheckboxStatus(checkboxData[i].id)}
                               onChange = { this.setTag }
                        />
                            <label>{checkboxData[i].name}</label>
                    </div>
                    <List.Content floated="right" >
                        <Label>
                            0
                        </Label>
                    </List.Content>
                </List.Item>
            );
        }

getCheckboxStatus = checkBoxId => {
        let { checkboxes } =this.props;
        console.log('IDS', checkBoxId)
        if (checkboxes.length === 0) {
            return false;
        } else if (checkboxes.indexOf(checkBoxId)!==-1){
            return true;
        }

        return false;

    };

    setTag = e => {
        let { checkboxes } = this.state;
        if ( checkboxes.length === 0 ) {
            checkboxes.push( e.target.id );
        } else {
            if(checkboxes.indexOf(e.target.id)!==-1) {
                checkboxes.splice(checkboxes.indexOf(e.target.id),1);
            } else {
                checkboxes.push( e.target.id );
            }
        }
        this.setState({ checkboxes: checkboxes })
    }

React 渲染它并在控制台中抛出:

Warning: Invalid value for prop `checked` on <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

我的理解是因为我正在使用检查属性的方法。我怎样才能做同样的事情而不收到警告？

Answer 1

您的输入类型必须是复选框，而不是单选。您还需要使用 checked 属性引用状态。

 <input 
     type="checkbox"
     id={checkboxData[i].id}
     checked={this.state.checkBoxes[i]}
     onChange={this.setTag}
 />

这将根据复选框的状态将状态设置为 true 或 false