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

我正在学习反应，并尝试基于material-ui创建简单的TODO，我在处理IconMenu菜单操作时遇到问题，菜单显示在listItem元素中。此时我不知道在菜单中单击删除操作时如何触发具有项名称的deleteItem函数作为参数。React + MaterialUi在IconMenu和ListItem中处理操作

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> 
     ) 
    } 
}

来源

2017-01-01 kuba_ceg

据我所看到的，你应该能够在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。

来源

2017-01-01 16:28:17

谢谢，它的工作原理。我会阅读有关Redux的信息:) –

我认为更好的方法是使用每个MenuItem所具有的onTouchTap，所以onChange函数不会有switch或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}/>) 
        })

来源

2017-01-03 09:39:08

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

回答

相关问题