React + MaterialUi在IconMenu和ListItem中的处理操作

Question

我正在学习react，我尝试基于material创建简单的TODO，我在处理IconMenu菜单操作时遇到了问题，菜单显示在listItem元素中。此时，我不知道在菜单中单击delete操作时如何触发以项目名称作为参数的deleteItem函数。

const iconButtonElement = (
    <IconButton touch={true} tooltip="More" tooltipPosition="bottom-left">
        <MoreVertIcon color="black"/>
    </IconButton>
);

const rightIconMenu = (
    <IconMenu iconButtonElement={iconButtonElement}>
        <MenuItem value="done" leftIcon={<Done />}>Mark as done</MenuItem>
        <MenuItem value="delete" leftIcon={<Delete />}>Delete</MenuItem>
    </IconMenu>
);

class TodoElements extends Component {
    deleteItem(nameProp)
    {
        this.props.delete(nameProp);
    }
    render() {
        var listItemRender = function(item) {
            return <ListItem key={item.name} primaryText={item.name} style={listItemStyle} rightIconButton={rightIconMenu}/>
        };
        listItemRender = listItemRender.bind(this);
        return (
            <List>
                {this.props.items.map(listItemRender)}
            </List>
        )
    }
}

Answer 1

据我所见，您应该能够将onChange处理程序添加到IconMenu中。所以您的rightIconMenu可以如下所示：

const RightIconMenu = ({onChange}) => (
    <IconMenu iconButtonElement={iconButtonElement} onChange={onChange}>
        <MenuItem value="done" leftIcon={<Done />}>Mark as done</MenuItem>
        <MenuItem value="delete" leftIcon={<Delete />}>Delete</MenuItem>
    </IconMenu>
);

然后，您可以像这样在TodoElements中使用它：

class TodoElements extends Component {
    constructor(props){
        super(props);

        this.state = {
            items: props.items
        };
    }

    createChangeHandler = (nameProp) => {
        return (event, value) => {
            if(value==="delete"){
                this.deleteItem(nameProp);
            }
        };
    }

    deleteItem = (nameProp) =>
    {
        this.setState({ 
            items: this.state.items.filter((item) => {
                return item.name !== nameProp);
            })
        });
    }

    render() {
        return (
            <List>
            {this.state.items.map((item) => {
                <ListItem key={item.name} primaryText={item.name} style={listItemStyle} 
                    rightIconButton={<RightIconMenu onChange={this.createChangeHandler(item.name)} />}/>
            })}
            </List>
        )
    }
}

替代

作为另一种解决方案，您可以将onClick处理程序绑定到删除MenuItem。我可能会这样实施：

const RightIconMenu = ({onDelete}) => (
    <IconMenu iconButtonElement={iconButtonElement}>
        <MenuItem value="done" leftIcon={<Done />}>Mark as done</MenuItem>
        <MenuItem value="delete" leftIcon={<Delete />} onClick={onDelete}>Delete</MenuItem>
    </IconMenu>
);

然后替换TodoElements中的适当函数：

createChangeHandler = (nameProp) => {
    return (event, value) => {
        this.deleteItem(nameProp);
    };
}
render() {
    return (
        <List>
        {this.state.items.map((item) => {
            <ListItem key={item.name} primaryText={item.name} style={listItemStyle} 
                rightIconButton={<RightIconMenu onDelete={this.createDeleteHandler(item.name)} />}/>
        })}
        </List>
    )
}

至于处理项列表的状态，您可能应该查看全局状态管理(如Redux )。

Answer 2

我认为更好的方法是使用每个onTouchTap都有的MenuItem，这样onChange函数就不会有一个开关或许多if语句。实际上，当我遍历所有菜单项时，我都在使用它，在我看来，它是这样的：

                        _.map(menuItems, (currItem, index) => {
                        return (<MenuItem primaryText={currItem.primaryText}
                                          rightIcon={currItem.rightIcon}
                                          leftIcon={currItem.leftIcon}
                                          key={`menu-item-${index}`}
                                          value={currItem.value}}
                                          onTouchTap={currItem.onTouchTap}/>)
                    })