Question

我正在使用Semantic-ui并拥有包含列表的组件项目。每个项目都有一组复选框：

import 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 = {
            checkboxes: []
        }
    }

    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 className="container"  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.setCheckbox }
                              // checked = { this.state.data.id === checkboxData[i].id }
                    />
                    <List.Content floated="right" >
                        <Label>
                            0
                        </Label>
                    </List.Content>
                </List.Item>
            );
        }
        return checkboxes;
    };

    setCheckbox = (e, itemData) => {
        let { checkboxes } = this.state;
        console.log('ITEMM!!!', itemData)
    }
}

如何在我设置onClick的每个复选框上看到它，它会调用setCheckbox。当我只勾选1个复选框时，它会调用setCheckbox 3次，然后进入控制台console.log 3次。出了什么问题，我怎样才能纠正它，setCheckbox每1次检查只能工作1次？

Answer 1

onClick存在问题。我将其更改为onChange（），现在它可以正常工作

为什么处理程序调用渲染方法3次？

1 个答案: