Hinzufügen einer Funktion zu einem onClick

Question

Ich möchte React.js verwenden, um eine Einzelseitenanwendung zu erstellen, und ich möchte eine Liste in einem Material-ui-Fach erstellen. Ich möchte jedes Mal, wenn ich einen Knopf drücke, ein Element in ein Array einfügen, aber ich weiß nicht, wie ich diese Funktion schreiben soll.

Hier ist meine Buttom:

<RaisedButton 
      label="Next" 
      primary={true} 
      onClick={this.onNext} 
      /> 

Hier ist OnNext Funktion:

onNext = (event) => { 
    const current = this.state.controlledDate; 
    const date = current.add(1, 'days'); 
    this.setState({ 
     controlledDate: date 
    }); 
    this.getImage(moment(date)); 
    } 

Und das ist der Code, den ich in OnNext Funktion hinzufügen möchten:

menuItems.push(<MenuItem onClick={this.handleClose}>{this.state.image.date}</MenuItem>); 

Answer 1

Dies ist Ein Beispielcode, der Menüeinträge für die Menüleiste im Status

hinzufügt

const { RaisedButton, MuiThemeProvider, Drawer, getMuiTheme, MenuItem } = MaterialUI; 

class Sample extends React.Component { 

    state = { 
    open: false, 
    items: [], 
    } 

    handleClose =() => { 
    this.setState({ open: false }); 
    } 

    handleOpen =() => { 
    this.setState({ open: true }) 
    } 

    onNext =() => { 
    this.setState(state => { 
     return Object.assign({}, state, { 
     items: state.items.concat([ 
      { 
      // add any other button props here (date, image, etc.) 
      text: `Item ${state.items.length + 1}` 
      } 
     ]), 
     }); 
    }) 
    } 

    render() { 
    return (
     <div> 
     <Drawer 
      openSecondary={true} 
      width={200} 
      open={this.state.open} 
     > 
      {this.state.items.map(item => (
      <MenuItem onClick={this.handleClose}>{item.text}</MenuItem> 
      ))} 
     </Drawer> 
     <RaisedButton 
      label="Next" 
      primary={true} 
      style={{ margin: 12 }} 
      onClick={this.onNext} />   
     <RaisedButton 
      label="Open Drawer" 
      primary={true} 
      style={{ margin: 12 }} 
      onClick={this.handleOpen} />   
     </div> 
    ); 
    } 

} 

const App =() => (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Sample /> 
    </MuiThemeProvider> 
); 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
); 

es hier probieren: https://jsfiddle.net/jprogd/eq533rzL/

Hoffe, es sollte Ihnen eine Idee geben, wie weiter gehen