मैं एक नौसिखिया डेवलपर हूं और मैं Reactjs के साथ काम करता हूं।

मैं एक प्रोजेक्ट कर रहा हूं जहां एक फ़्लिकर एपीआई सेवा से लाई गई तस्वीरों की एक गैलरी होगी।

प्रत्येक छवि में दो बटन होंगे:

1.क्लोन: क्लोन बटन पर क्लिक करने से छवि की नकल होनी चाहिए।

2.विस्तार करें: किसी छवि पर क्लिक करने से यह छवि बड़े दृश्य में प्रदर्शित होनी चाहिए

मैं छवि को अपने से भिन्न तरीके से कैसे क्लोन करूं? (अधिक प्रभावी)

मैं 'प्रतिक्रिया-मोडल' का उपयोग किए बिना छवि को कैसे बड़ा करूं?

मेरे पास दो घटक हैं- एक गैलरी का और दूसरा चित्रों का।

मेरी गैलरी.जेएस:

handleClone = image => {
this.state.images.push(image);
this.setState({ images: this.state.images });
 };

render() {
 return (
  <div className="gallery-root">
    {this.state.images.map((dto, index) => {
      return <Image key={'image-' + index} dto={dto} galleryWidth= 
        {this.state.galleryWidth}
      handleClone={image => this.handleClone(image)}
      />;
    })}
   </div>
  );
 }

मेरी छवि.जेएस:

handleClone() {
this.props.handleClone(this.props.dto); // send to the Gallery component 
 the image to clone.
}

render() {
return (

    <div>
      <FontAwesome className="image-icon" name="clone" title="clone" 
       onClick={()=> this.handleClone()}/>
      <FontAwesome className="image-icon" name="filter" title="filter" 
       onClick={()=> this.filterChange()}/>
      <FontAwesome className="image-icon" name="expand" title="expand" />
    </div>
  </div>
 );
 }

धन्यवाद :)

0
Y.A 14 जुलाई 2019, 20:12

1 उत्तर

सबसे बढ़िया उत्तर

क्लोन उद्देश्यों के लिए।

handleClone = image => {
  const imagesCopy = [...this.state.images]; //creates a copy of the images array which is stored in your component.
  imagesCopy.push(image);
  //this.state.images.push(image); this way will mutate the state directly which is a mistake.
  this.setState({ images: imagesCopy });
};

react-modal चीज़ के बारे में, मुझे प्रश्न पोस्ट में इससे संबंधित कुछ भी नहीं दिख रहा है, क्या आप कृपया संबंधित कोड साझा कर सकते हैं?

0
Sultan H. 15 जुलाई 2019, 16:18