为什么复选框不能正常工作？

Question

我正在使用 this library 并希望执行项目列表，并且每个项目都有自己的复选框。我生成了这些项目，并且 onClick 方法有效（显示有关单击的复选框的信息，但它不是 "draws" 那个复选框是 checked.Where 是错误的吗？这是我的代码：

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是否处于选中状态

<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

时切换它

为什么复选框不能正常工作？

Why checkboxes don't work correctly?

reactjs

semantic-ui

semantic-ui-react