React Material UI를 사용하여 아이콘 메뉴에서 대화 상자를 프로그래밍 방식으로 여는 방법은 무엇입니까?

Question

나는 아이콘 메뉴를 가지고 있으며 아이콘 메뉴를 열 때 가능한 값을 보유하고있다. 예 :

listItems = { 
    [ 
     { 
      label: 'ZERO', 
      type: 'positive', 
      value: 0, 
     }, 
     { 
      label: 'ONE', 
      type: 'danger', 
      value: '1', 
     }, 
     { 
      label: 'TWO', 
      type: 'warning', 
      value: '2', 
     }, 
     { 
      label: 'THREE', 
      type: 'default', 
      value: '3', 
     } 
    ] 
} 

초기 값을 1로 설정하면 레이블 ONE이 메뉴에 표시됩니다. 선택한 값에 따라 대화 상자 (http://www.material-ui.com/#/components/dialog)를 표시하려고합니다. 따라서 사용자가 메뉴에서 하나를 선택하면 대화 상자가 열리길 원합니다. 대화 상자 내에서 몇 개의 입력 텍스트 필드는 대화 상자의 확인 버튼을 누르면 입력을 캡처합니다. 일반적으로 대화 상자는 일반적인 Button의 onClick 또는 onChange 메서드 아래에서 트리거됩니다. 필자의 경우 선택한 메뉴 옵션 아래에서 대화 상자를 트리거하고 싶습니다. 내 코드는 다음과 같다 : 옵션 만 콘솔 문이 인쇄되는 선택 만하면

onItemSelection = {(value) => { 
    if (value === 1) { 
     console.log(`${value} is clicked`); 
     //Trigger the Dialog here 
     <Dialog 
      title="Dialog With Actions" 
      actions={actions} 
      modal={false} 
      open={this.handleOpen} 
     > 
     </Dialog> 

내 handleOpen 방법은 다음과 같다 ,

그러나 지금과 같은

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

는 대화가 아니다 열리는. 이 문제를 해결하는 방법?

Answer 1

잘못된 여기

우선입니다 몇 가지가 있습니다 Dialog의 open 소품이 필요합니다 당신이

이

두 번째 대화 상자를 렌더링 할 필요가 있기 때문에 기능 onItemSelection 당신이 잘못되는 Dialog이 bool 값은 무엇을 당신이 그것에 공급하는 것은 this.handleOpen

당신은 제대로

로 쓸 수있는 기능입니다

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

onItemSelection={(value) => { 
     if (value === 1) { 
      console.log(`${value} is clicked`); 
      //Trigger the Dialog here 
      this.handleOpen(); 
     } 
} 

render() { 
    return (
     <Dialog 
      title="Dialog With Actions" 
      actions={actions} 
      modal={false} 
      open={this.state.open} 
      > 
      </Dialog> 
    ) 
} 

그리고 분명히 state 변수 open을 false로 설정하여 대화 상자를 닫을 수있는 방법이 필요합니다.