반응 부트 스트랩 모달을 이스케이프 키로 닫습니다.

Question

6 개의 버튼이 있습니다.이 버튼을 클릭하면 모달이 활성화됩니다. 이것은 React에 쓰여 있습니다.

//Since I have 6 different modals, giving each of them an id would distinguish them 
onCloseModal(id) { 
    this.setState({ 
     open: false, 
     modalShown: id 
    }) 
} 

render() { 
    return (
     <Modal onHide={this.onCloseModal.bind(this, item.id)} keyboard={true}> 
      <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}> 
      </Modal.Header> 
     </Modal> 
    ) 
} 

내가 keyboard={true}을 가지고있는 모달를 종료 할 Esc 키를 눌러 https://react-bootstrap.github.io/components.html#modals-props의 설명서에 따라. 그러나 그것은 작동하지 않습니다. 내 버튼마다 고유 한 ID가 있기 때문에 모든 설정이 완료되었다고 생각합니다. 왜 이스케이프 키가 응답하지 않습니까?

다음은 작동중인 모달 이미지입니다.

Answer 1

구성 요소 상태가 제대로 조동사의 상태를 표현하지 않은 것 같습니다. an example (가장 좋은 방법이 아닐 수도 있습니다)을 작성하여보다 구체적인 방법으로 상태를 처리하는 방법을 보여줍니다. 내가 충분히 코드를 제공하지 않았다, 그러나 나는 실제로 당신이 작성한 코드 (정확히 꽤 많이)했던 것을

onCloseModal() { 
    this.setState({ 
    modalShown: 0 
    }) 
} 

onShowModal(id) { 
    this.setState({ 
    modalShown: id 
    }) 
} 

checkModal(id) { 
    if (id == this.state.modalShown) { 
    return true; 
    } else { 
    return false; 
    } 
} 

<Modal show={this.checkModal(item.id)} onHide={this.onCloseModal.bind(this)}</Modal>