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中處理操作

回答

相關問題