onClickに関数を追加する

Question

React.jsを使用して単一のページアプリケーションを作成したいと思っています。私はマテリアルIDの引き出しにリストを作成したいと思います。ボタンを押すたびに配列に要素を追加したいのですが、この関数を書く方法はありません。ここで

は私の湖底である：ここでは

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

はonNext機能です：

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

そして、これは私がonNext関数に追加するコードです：

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

Answer 1

これは、引出しメニュー項目を状態を使用して追加するサンプルコード

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') 
); 

ここでそれを試してみてください：https://jsfiddle.net/jprogd/eq533rzL/

が、それはあなたに