Question

我正在使用this library并希望执行项目列表，并且每个项目都有自己的复选框。我做了这些项目的生成，onClick方法工作（显示有关单击复选框的信息，但它没有“绘制”复选框被选中。有错误吗？在这里我的代码：

mport React, { Component }            from 'react'
import { Divider,Label,List,Checkbox,Header } from 'semantic-ui-react'

    export default class Menu extends Component {
        constructor(props) {
            super(props);
            this.state = {

            }
        }

        render() {
            let { tags } = this.props;

            return (
                <div className="ui segment basic" >
                    {typeof tags === "undefined" ?
                        <div>Select partner and process</div>
                    :
                        this.getTagListItems(tags)
                    }
                </div>
            )
        }

        getTagListItems = tagsData => {
            let tags = [];
            for(let i=0; i<tagsData.length; i++){
                if ( tagsData[i].children.length !==0 ) {
                    tags.push(
                        <div key = { i }>
                            <Header as="h3">{ tagsData[i].name }</Header>
                            <Divider/>
                            <List>
                                {this.getTagCheckboxes(tagsData[i].children)}
                            </List>
                        </div>
                    );
                }
            }
            return tags;
        };

        getTagCheckboxes = checkboxData => {
            let checkboxes = [];
            for(let i=0; i<checkboxData.length; i++) {
                checkboxes.push(
                    <List.Item key = { checkboxData[i].id }>
                        <Checkbox label   = { checkboxData[i].name }
                                  id      = { checkboxData[i].id }
                                  onClick = { this.setTag }
                        />
                        <List.Content floated="right" >
                            <Label>
                                0
                            </Label>
                        </List.Content>
                    </List.Item>
                );
            }
            return checkboxes;
        };

        setTag = (e, data) => {
            console.log('Check', data)
        }

    }

Answer 1

您需要为需要检查的复选框设置checked属性。

首先，您需要初始化您将保留所选值的状态。

constructor(props) {
        super(props);
        this.state = {
            data: {},
        }
}

然后你需要比较是否在状态中选择了你正在渲染的复选框。

<Checkbox label   = { checkboxData[i].name }
          id      = { checkboxData[i].id }
          onClick = { this.setTag }
          checked = { this.state.data.id === checkboxData[i].id }
/>

最后在setTag回调中，您需要在用户点击复选框时设置所选值

setTag = (e, data) => {
        console.log('Check', data)
        this.setState({ data });
}

这将作为一个单选按钮，因为状态只能保留一个类型的项目，如果您想允许用户同时检查多个复选框，则需要添加checked每个项目的属性，并在调用onClick

时切换它

为什么复选框无法正常工作？

1 个答案: