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.

我如何理解这是因为我正在使用checked属性的方法。我怎么能做同样的事情却没有收到警告？

Answer 1

您的输入类型必须是复选框，而不是收音机。您还需要使用checked属性引用州。

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

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

如何组织多个复选框？

1 个答案: