প্রতিক্রিয়াতে কোনও ডিওএম উপাদান কীভাবে অ্যাক্সেস করবেন? প্রতিক্রিয়ায় ডকুমেন্ট.সেটমেন্টবিয়আইডি () এর সমতুল্য কী

Question

আমি কীভাবে প্রতিক্রিয়া.জেজে নির্দিষ্ট বারগুলি নির্বাচন করব?

এটি আমার কোড:

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>
        )
    }
});

আমি হ্যান্ডেলক্লিক 10 ফাংশনটি কার্যকর করতে এবং আমার নির্বাচিত প্রগতিবারের জন্য অপারেশন করতে চাই। তবে আমি যে ফলাফল পেয়েছি তা হ'ল:

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

আমি কীভাবে প্রতিক্রিয়া.জেজে নির্দিষ্ট এলিমেন্টটি নির্বাচন করব?

Answer 1

আপনি উল্লেখ করে এটি করতে পারেন ref

সম্পাদনা: ক্রিয়ামূলক উপাদান সহ v16.8.0 প্রতিক্রিয়া মধ্যে, আপনি ব্যবহারের সাথে একটি রেফ সংজ্ঞায়িত করতে পারেন। নোট করুন যে আপনি যখন কার্যকরী উপাদানগুলির উপর একটি রেফ উল্লেখ করেন, আপনাকে useImperativeHandleকার্যকারী উপাদানগুলির মধ্যে থেকে নির্দিষ্ট ফাংশনগুলি প্রকাশ করার জন্য ব্যবহারের ডিওএম উপাদানকে রেফ ফরওয়ার্ড করার জন্য এটিতে React.forwardRef ব্যবহার করতে হবে

উদা:

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 () ব্যবহারের জন্য ডোক

---

সম্পাদনা

তবে ফেসবুক এটির বিরুদ্ধে পরামর্শ দেয় কারণ স্ট্রিং রেফগুলিতে কিছু সমস্যা থাকে, উত্তরাধিকার হিসাবে বিবেচিত হয় এবং ভবিষ্যতের রিলিজগুলির মধ্যে এটি মুছে ফেলার সম্ভাবনা রয়েছে।

ডক্স থেকে:

লিগ্যাসি এপিআই: স্ট্রিং রেফেস

আপনি যদি এর আগে প্রতিক্রিয়ার সাথে কাজ করেছিলেন, আপনি সম্ভবত কোনও পুরানো এপিআইয়ের সাথে পরিচিত হতে পারেন যেখানে রেফ অ্যাট্রিবিউটটি একটি স্ট্রিং, যেমন "টেক্সটইনপুট", এবং ডিওএম নোডটি এই.রেফস.টেক্সট ইনপুট হিসাবে অ্যাক্সেস করা হয়। আমরা এর বিরুদ্ধে পরামর্শ দিচ্ছি কারণ স্ট্রিং রেফগুলিতে কিছু সমস্যা রয়েছে, উত্তরাধিকার হিসাবে বিবেচিত হয় এবং ভবিষ্যতের রিলিজগুলির মধ্যে এটি অপসারণের সম্ভাবনা রয়েছে। আপনি যদি বর্তমানে রেফগুলিতে অ্যাক্সেস করতে এই.রেফস.টিেক্সট ইনপুট ব্যবহার করেন তবে আমরা পরিবর্তে কলব্যাক প্যাটার্নটি সুপারিশ করি।

প্রতিক্রিয়া 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

ফেসবুক এই পদ্ধতির বিরুদ্ধে পরামর্শ দেয়। এখানে ফেসবুক.

— দিমিত্রি

@ ডিমিত্রিমার যেমন আমি দেখতে পাচ্ছি উপরের পৃষ্ঠাটি v15.4.2 এর জন্য লেখা হয়েছে এবং আমার ধারণা, উত্তরটি লেখার আগে এটি ছিল না। যাইহোক উত্তরটি সঠিক পদ্ধতির সাথে সম্পাদনা করে

— শুভম খাত্রি

@ ম্যাটসিডোর, সম্পাদনার জন্য ধন্যবাদ, আপনি আমাকে কিছুটা সময় সাশ্রয় করেছেন :-)

— শুভম খত্রি

উম, প্রশ্ন যদি আমি "এই" এর মাধ্যমে এটি অ্যাক্সেস করতে না পারি তবে আমার কী উপাদানটি প্রয়োজন তা যদি অন্য শ্রেণীর উদাহরণ হতে পারে তবে কী করব? (অর্থাত্ অন্য সন্তানের পিতামণ্ডলের অংশের মধ্যে উপাদানটি প্রতিক্রিয়া দেখায়)

— অক্ষয় কিশোর

@ সাক্ষ্যকিশোর আপনাকে অন্য নামটি ইনারআরফ বলে ব্যবহার করে রেফটি পাস করতে হবে এবং এটি পছন্দসই উপাদানটিতে দিতে হবে

— শুভম খাত্রি

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

— জেমস পলুস

@ জামেসপুলস নিশ্চিত করুন যে আপনি কঠোর মোডে চলছেন না, কারণ প্রতিক্রিয়া আপনাকে 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

যেহেতু প্রতিক্রিয়াটি এইচটিএমএল তৈরি করতে জেএসএক্স কোড ব্যবহার করে আমরা ডকুমেন্ট.কোয়ারীস্লেেক্টর বা getulementById এর মতো নিয়ন্ত্রণ পদ্ধতি ব্যবহার করে ডোমকে উল্লেখ করতে পারি না।

পরিবর্তে আমরা ডোম অ্যাক্সেস করতে এবং পরিচালনা করতে রিঅ্যাক্ট রেফার সিস্টেমটি ব্যবহার করতে পারি নীচের উদাহরণে দেখানো হয়েছে:

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 উপাদানটিতে একটি আইডি যুক্ত করতে পারেন, ডকুমেন্ট.জেটমেন্টমেন্টবাইআইডি ব্যবহার করে এটি ধরুন এবং বেশিরভাগ ক্ষেত্রে এটি কার্যকর থাকবে work এটি আপনার সমস্যাগুলি ডিবাগ করা আরও শক্ত করে তুলতে পারে, তবে প্রতিক্রিয়া জানায় / জেএসএক্স ডোনল্ট না করে যাতে আপনি নেটিভ ডোম পদ্ধতি ব্যবহার করতে পারবেন না

— অ্যাডাম ট্রপ্প