Reactjs 为什么onclick称为react material ui

我用对话框和列表编写react组件。当组件接收到“open”prop并尝试在render函数中构建列表时，它的调用

onClick={this.handleToggle（item.id）}

ListItem的函数，所以，这会导致一个无限循环“render->onClick->setState->render->…”。为什么？我怎样才能避开这件事呢

handleToggle(value) {
   if (this.state.isLoading) {
       return;
   }

    const {checked} = this.state;
    const currentIndex = checked.indexOf(value);        
    const newSelected = checked.slice();

    if (currentIndex === -1) {
        newSelected.push(value);
    } else {
        newSelected.splice(currentIndex, 1);
    }
    this.setState({checked: newSelected});
}

render() {  
    if (!this.props.show) {
        return null;
    }
    if (this.state.isLoading) {
        return(<p>Loading...</p>);
    }

    const {classes, show, caption} = this.props;
    const {checked, projects} = this.state;

    return (
        <Dialog
            open={show}
            onClose={this.onCancel}
            aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">{caption}</DialogTitle>
                <DialogContent>
                    <List>
                        {projects.map(item => 
                            <ListItem
                                key={item.id}
                                role={undefined}
                                dense
                                button
                                onClick={ this.handleToggle(item.id) }
                                className={classes.listItem}
                            >
                                <Checkbox 
                                    tabIndex={-1} 
                                    disableRipple
                                    checked={checked.indexOf(item.id) !== -1}
                                />
                                <ListItemText primary={item.name}/>
                            </ListItem>
                            ) }
                    </List>
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.onSuccess} color="primary">OK</Button>
                    <Button onClick={this.onCancel} color="secondary">Cancel</Button>
                </DialogActions>
        </Dialog>
    );
}

handleToggle（值）{
if（此.state.isLoading）{
返回；
}
const{checked}=this.state；
const currentIndex=checked.indexOf（值）；
const newSelected=checked.slice（）；
如果（当前索引==-1）{
newSelected.push（值）；
}否则{
剪接（当前索引，1）；
}
this.setState（{checked:newSelected}）；
}
render（）{
如果（！this.props.show）{
返回null；
}
if（此.state.isLoading）{
返回（加载…
）；
}
const{classes，show，caption}=this.props；
const{checked，projects}=this.state；
返回(
{标题}
{projects.map（项=>
) }
好啊
取消
);
}

onClick={this.handleToggle（item.id）}

将导致每次渲染时对

handleToggle

函数求值，并且由于您在handleToggle中调用setState，它将进入无限循环。onClick需要一个函数，您应该像这样编写它

onClick={() => this.handleToggle(item.id) }

---

这将导致仅在

单击
事件上调用handleToggle
onClick={this.handleToggle（item.id）}
将导致每次渲染发生时都对
handleToggle
函数求值，并且由于在handleToggle中调用setState，它将进入无限循环。onClick需要一个函数，您应该像这样编写它

onClick={() => this.handleToggle(item.id) }

这将导致仅在
单击事件上调用Handletogle
您必须像这样编写它

onClick={ () => this.handleToggle(item.id) }

因为编写
onClick={this.handleToggle（item.id）}
会立即调用该方法，而不是将其作为onClick事件的回调来调用

onClick={ () => this.handleToggle(item.id) }

因为编写
onClick={this.handleToggle（item.id）}
会立即调用该方法，而不是将其作为onClick事件的回调
change
onClick={this.handleToggle（item.id）}
onClick={（）=>this.handleToggle（item.id）}
.change
onClick={this.handleToggle（item.id）}
to
onClick={（）=>this.handleToggle（item.id）}
。