Đóng một phương thức khởi động phản ứng bằng phím thoát

Question

Tôi có 6 nút bấm, khi được nhấp, kích hoạt một phương thức. Điều này được viết bằng 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> 
    ) 
} 

Tôi có keyboard={true}, mà theo tài liệu tại https://react-bootstrap.github.io/components.html#modals-props, nhấn phím Escape sẽ thoát khỏi phương thức. Nó không hoạt động. Tôi tin rằng tôi có mọi thứ được thiết lập bởi vì mỗi nút của tôi có một ID duy nhất - tại sao phím thoát không phản hồi?

Đây là hình ảnh của phương thức hoạt động.

Answer 1

Dường như trạng thái thành phần của bạn không đúng cách đại diện cho tình trạng của modals. Tôi đã viết cho bạn an example (có thể không phải là phương pháp hay nhất?) Cho thấy cách bạn có thể xử lý trạng thái theo cách cụ thể hơn.

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>