React + MaterialUi IconMenuとListItemでの処理アクション

Question

私は反応が覚えていて、マテリアルUIに基づいた簡単なTODOを作成しようとしていますが、IconMenuメニューアクションの処理に問題があり、メニューはlistItem要素に表示されます。現時点では、削除アクションがメニュー内でクリックされたときに、アイテム名をパラメータとしてトリガ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

私の知る限り見ることができるように、あなたはあなたのIconMenuにonChangeハンドラを追加することができるはずです。だからあなたの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でそれを使用することができます：あなたはonClickハンドラをバインドすることができ、代替ソリューションとして

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

代替

を代わりに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

私はより良いアプローチは、すべてのMenuItemが持っているonTouchTapを使用していると思うので、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}/>) 
        })