एस्केप कुंजी

Question

के साथ एक प्रतिक्रिया बूटस्ट्रैप मोडल बंद करना मेरे पास 6 बटन हैं, जब क्लिक किया गया, एक मोडल सक्रिय करें। यह प्रतिक्रिया में लिखा गया है।

//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} है, जो https://react-bootstrap.github.io/components.html#modals-props पर दस्तावेज़, एस्केप कुंजी मोडल बाहर आ जाएंगे दबाने के अनुसार। हालांकि यह काम नहीं कर रहा है। मेरा मानना ​​है कि मेरे पास सबकुछ स्थापित है क्योंकि मेरे प्रत्येक बटन में एक अद्वितीय आईडी है - क्यों बचने की कुंजी प्रतिक्रिया नहीं दे रही है?

यहां कार्रवाई में मोडल की एक छवि है।

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>