onClick에 함수 추가

Question

React.js를 사용하여 단일 페이지 응용 프로그램을 만들고 싶고 재료 - 서랍에 목록을 만들고 싶습니다. 단추를 누를 때마다 배열에 요소를 추가하고 싶지만이 함수를 작성하는 방법은 없습니다.

다음

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

이 onNext 기능입니다 : 여기

내 buttom의입니다

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/가 어떻게