प्रतिक्रिया में DOM तत्व का उपयोग कैसे करें? React में document.getElementById () का संतुलन क्या है

Question

मैं react.js में कुछ सलाखों का चयन कैसे करूं?

यह मेरा कोड है:

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

मैं इस प्रतिक्रिया घटक का उपयोग करना चाहता हूं:

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

मैं handleClick10 फ़ंक्शन को निष्पादित करना चाहता हूं और मेरे चयनित प्रगति पट्टी के लिए ऑपरेशन करना चाहता हूं। लेकिन मुझे जो परिणाम मिलता है वह है:

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

मैं react.js में कुछ निश्चित तत्व का चयन कैसे करूं?

Answer 1

आप निर्दिष्ट करके ऐसा कर सकते हैं ref

संपादित करें: कार्यात्मक घटक के साथ v16.8.0 प्रतिक्रिया में, आप उपयोग के साथ रेफ को परिभाषित कर सकते हैं। ध्यान दें कि जब आप एक कार्यात्मक घटक पर एक रेफरी निर्दिष्ट करते हैं, तो आपको उपयोग के DOM तत्व को रेफ को अग्रेषित करने के लिए उस पर React.forwardRef का उपयोग करना होगा।useImperativeHandle कार्यात्मक घटक के भीतर से कुछ कार्यों को उजागर करने के लिए करने की आवश्यकता होती है।

उदाहरण के लिए:

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

संपादित करें:

में 16.3+ प्रतिक्रिया , उपयोग React.createRef()अपने रेफरी बनाने के लिए:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

तत्व का उपयोग करने के लिए, उपयोग करें:

const node = this.myRef.current;

React.createRef () का उपयोग करने के लिए DOC

---

संपादित करें

हालाँकि फेसबुक इसके खिलाफ सलाह देता है क्योंकि स्ट्रिंग रिफ में कुछ मुद्दे होते हैं, जिन्हें विरासत माना जाता है, और भविष्य में रिलीज़ होने वाले एक में हटाए जाने की संभावना है।

डॉक्स से:

लिगेसी एपीआई: स्ट्रिंग रेफरी

यदि आपने पहले React के साथ काम किया है, तो आप एक पुराने API से परिचित हो सकते हैं, जहाँ Ref विशेषता "textInput" की तरह एक स्ट्रिंग है, और DOM नोड को इस रूप में एक्सेस किया जाता है ।refs.textInput। हम इसके खिलाफ सलाह देते हैं क्योंकि स्ट्रिंग रिफ्स में कुछ मुद्दे हैं, जिन्हें विरासत माना जाता है, और भविष्य के रिलीज में से एक में हटाए जाने की संभावना है। यदि आप वर्तमान में इस .refs.textInput का उपयोग करने के लिए refs का उपयोग कर रहे हैं, तो हम इसके बजाय कॉलबैक पैटर्न की सलाह देते हैं।

16.2 और पहले के रिएक्ट के लिए अनुशंसित तरीका कॉलबैक पैटर्न का उपयोग करना है:

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

कॉलबैक का उपयोग करने के लिए डीओसी

---

प्रतिक्रिया के पुराने संस्करण भी नीचे की तरह स्ट्रिंग का उपयोग कर परिभाषित करते हैं

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

तत्व को पाने के लिए बस करो

var object = this.refs.Progress1;

thisतीर फ़ंक्शन ब्लॉक के अंदर का उपयोग करना याद रखें जैसे:

print = () => {
  var object = this.refs.Progress1;  
}

और इसी तरह...

Comments

फेसबुक इस दृष्टिकोण के खिलाफ सलाह देता है। यहां देखें facebook.github.io/react/docs/refs-and-the-dom.html

— दिमित्री

@dmitrymar जैसा कि मैं देख सकता हूं कि उपरोक्त पृष्ठ v15.4.2 के लिए लिखा गया है और मुझे लगता है कि, जब मैंने उत्तर लिखा था तो यह पहले नहीं था। वैसे भी उत्तर को सही दृष्टिकोण के साथ संपादित किया गया

— शुभम खत्री

@MattSidor, संपादन के लिए धन्यवाद, आपने मुझे कुछ समय बचाया :-)

— शुभम खत्री

उम, सवाल करें कि क्या मैं इसे "इस" के माध्यम से एक्सेस नहीं कर सकता हूं, जैसे कि क्या होगा यदि मुझे जिस घटक की आवश्यकता है वह अन्य वर्ग का एक उदाहरण है? (यानी एक अन्य बच्चा मूल घटक के भीतर घटक प्रतिक्रिया करता है)

— अक्षय किशोर

@akshaykishore आपको अन्य नाम का उपयोग करके रेफरी को पास करने की आवश्यकता होगी और इसे आंतरिक घटक के पास भेजना होगा

— शुभम खत्री

Answer 2

reactआप में तत्व प्राप्त करने के लिए उपयोग करने की आवश्यकता है refऔर फ़ंक्शन के अंदर आप ReactDOM.findDOMNodeविधि का उपयोग कर सकते हैं ।

लेकिन मुझे जो करना पसंद है, वह है इवेंट के अंदर रेफरी को कॉल करना

<input type="text" ref={ref => this.myTextInput = ref} />

यह आपको पता लगाने में मदद करने के लिए कुछ अच्छी लिंक है।

Comments

ऐसा करने का यह सही तरीका है। यह उस वस्तु / वर्ग के तत्व को संदर्भित करता है जिसे आप केवल उपयोग this.myTextInputकरने के लिए उपयोग कर सकते हैं।

— सैम परमेस्टर

मैं इसे गतिशील रूप से बनाए गए तत्व के साथ कैसे कर सकता हूं?

— सागर कोडे

कॉलिंग React.findDOMNodeमुझे देता हैreact__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function

— जेम्स पॉल्स

@JamesPoulose सुनिश्चित करें कि आप सख्त मोड में नहीं चल रहे हैं, क्योंकि प्रतिक्रिया आपको React.findDOMNodeसख्त मोड में उपयोग करने की अनुमति नहीं देगी ।

— लिम्पल्स

Answer 3

आप प्रतिस्थापित कर सकते हैं

document.getElementById(this.state.baction).addPrecent(10);

साथ में

this.refs[this.state.baction].addPrecent(10);


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>

Comments

मैं इसे गतिशील रूप से बनाए गए तत्व के साथ कैसे कर सकता हूं?

— सागर कोडे

Answer 4

चूंकि React एक HTML बनाने के लिए JSX कोड का उपयोग करता है इसलिए हम documment.querySelector या getElementById जैसे विनियमन विधियों का उपयोग करके डोम का उल्लेख नहीं कर सकते।

इसके बजाय हम नीचे उदाहरण में दिखाए गए अनुसार डोम तक पहुंचने और हेरफेर करने के लिए रिएक्ट रेफ सिस्टम का उपयोग कर सकते हैं:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

Comments

यह सच नहीं है। आप img तत्व में एक आईडी जोड़ सकते हैं, इसे document.getElementById का उपयोग करके पकड़ सकते हैं, और ज्यादातर मामलों में, यह ठीक काम करेगा। यह समस्या पैदा हो सकती / अपने कोड डिबग करने के लिए कठिन है, लेकिन प्रतिक्रिया / jsx donlt यह इतना करना है कि आप देशी डोम तरीकों का उपयोग खिचड़ी भाषा

— एडम Tropp