मैं दो तरीकों से फ़ंक्शन को बाध्य कर रहा हूं, पहला ठीक काम कर रहा है, लेकिन रिटर्न विधि के अंदर es6 फ़ंक्शन सिंटैक्स का उपयोग करने के लिए यह एक बुरा तरीका है क्योंकि यह हर उदाहरण पर एक नई विधि कहता है, सभी कोड ठीक काम कर रहे हैं, मुझे बस मदद चाहिए बंधन समारोह। रिटर्न स्टेटमेंट में बाइंडिंग ठीक काम करती है।

import React, { Component } from 'react';
import './ColorBox.css';

export default class ColorBox extends Component{
    //Constructor
    constructor(props){
        super(props);
        this.state = { copied: false};
    }
    
    // Not binded because its called inside the binded function, althrough it doesnot matter
    changeCopyState(){ 
        this.setState({ copied: true}, () => (
            setTimeout(() => (
                this.setState({copied: false})
            ), 1500)
        ))
    }

    // Function to copy color code to clipboard
    copyToClipBoard(str) {
        const element = document.createElement('textarea');
        element.value = str;
        document.body.appendChild(element);//insert textarea into html body
        element.select();
        document.execCommand('copy');//internal command to copy from text area
        document.body.removeChild(element);//remove after coping command
        this.changeCopyState();
    }

    render(){
        let {name, background} = this.props;
        let {copied} = this.state;  
        return (
            <div style={{ background}} className="ColorBox">
                <div style={{ background }} className={`copy-overlay ${ copied && "show"}`} /> 
                    <div className="box-content">
                        <span>{name}</span>
                    </div>
                    <button className="copy-button" onClick={() => this.copyToClipBoard(background)}>Copy</button>
                <span className="more-shades">More</span>
            </div>
        )
    }
}

अब अगर मैं कन्स्ट्रक्टर के अंदर फ़ंक्शन को बांधने का प्रयास करता हूं, तो यह मुझे कॉलिंग फ़ंक्शन आदि पर सीमा से अधिक की त्रुटि देगा, यह व्यवहार क्यों हो रहा है।

import React, { Component } from 'react';
import './ColorBox.css';

export default class ColorBox extends Component{
    //Constructor
    constructor(props){
        super(props);
        this.state = { copied: false};
        this.copyToClipBoard = this.copyToClipBoard.bind(this);
    }
    
    // Not binded because its called inside the binded function, althrough it doesnot matter
    changeCopyState(){ 
        this.setState({ copied: true}, () => (
            setTimeout(() => (
                this.setState({copied: false})
            ), 1500)
        ))
    }

    // Function to copy color code to clipboard
    copyToClipBoard(str) {
        const element = document.createElement('textarea');
        element.value = str;
        document.body.appendChild(element);//insert textarea into html body
        element.select();
        document.execCommand('copy');//internal command to copy from text area
        document.body.removeChild(element);//remove after coping command
        this.changeCopyState();
    }

    render(){
        let {name, background} = this.props;
        let {copied} = this.state;  
        return (
            <div style={{ background}} className="ColorBox">
                <div style={{ background }} className={`copy-overlay ${ copied && "show"}`} /> 
                    <div className="box-content">
                        <span>{name}</span>
                    </div>
                    <button className="copy-button" onClick={this.copyToClipBoard(background)}>Copy</button>
                <span className="more-shades">More</span>
            </div>
        )
    }
}
1
Aqib Naeem 16 अप्रैल 2021, 09:00

1 उत्तर

यह शायद एक परिपत्र संदर्भ के कारण है। आप किसी ऐसी चीज़ तक पहुँच रहे हैं जो किसी चीज़ तक पहुँच रही है, जिसके परिणामस्वरूप अनंत मात्रा में कॉल आती हैं और कॉल स्टैक इसकी सीमा से अधिक हो जाता है।

आप इसके बजाय केवल ऑनक्लिक विधि के अंदर बाध्यकारी कर सकते हैं:

<button className="copy-button" onClick={this.copyToClipBoard.bind(this, background)}>Copy</button>
0
Yamo93 16 अप्रैल 2021, 06:14