প্রতিক্রিয়া, ES6 - getInitialState একটি সরল জাভাস্ক্রিপ্ট ক্লাসে সংজ্ঞায়িত করা হয়েছিল

Question

আমার কাছে নিম্নলিখিত উপাদান রয়েছে ( radioOther.jsx):

 'use strict';

 //module.exports = <-- omitted in update

   class RadioOther extends React.Component {

     // omitted in update 
     // getInitialState() {
     //    propTypes: {
     //        name: React.PropTypes.string.isRequired
     //    }
     //    return {
     //       otherChecked: false
     //   }
     // }

     componentDidUpdate(prevProps, prevState) {
         var otherRadBtn = this.refs.otherRadBtn.getDOMNode();

         if (prevState.otherChecked !== otherRadBtn.checked) {
             console.log('Other radio btn clicked.')
             this.setState({
                 otherChecked: otherRadBtn.checked,
             });
         }
     }

     onRadChange(e) {
         var input = e.target;
         this.setState({
             otherChecked: input.checked
         });
     }

     render() {
         return (
             <div>
                 <p className="form-group radio">
                     <label>
                         <input type="radio"
                                ref="otherRadBtn"
                                onChange={this.onRadChange}
                                name={this.props.name}
                                value="other"/>
                         Other
                     </label>
                     {this.state.otherChecked ?
                         (<label className="form-inline">
                             Please Specify:
                             <input
                                 placeholder="Please Specify"
                                 type="text"
                                 name="referrer_other"
                                 />
                         </label>)
                         :
                         ('')
                     }
                 </p>
             </div>
         )
     }
 };

ECMAScript6 ব্যবহার করার আগে সব কিছু ঠিকঠাক ছিল, এখন আমি 1 ত্রুটি, 1 সতর্কতা পাচ্ছি এবং আমার ফলোআপ প্রশ্ন রয়েছে:

ত্রুটি: আনকচড প্রকারের ত্রুটি: নালীর সম্পত্তি 'অন্যান্যচেকড' পড়তে পারে না

সতর্কতা: getInitialState রেডিওঅথারে সংজ্ঞায়িত করা হয়েছে, এটি একটি সরল জাভাস্ক্রিপ্ট শ্রেণি। এটি কেবল React.createClass ব্যবহার করে তৈরি ক্লাসগুলির জন্য সমর্থিত। আপনি কি পরিবর্তে কোনও রাষ্ট্রীয় সম্পত্তি সংজ্ঞায়িত করতে চেয়েছিলেন?

---

1. যে কেউ ত্রুটিটি কোথায় রয়েছে তা দেখতে পাচ্ছে, আমি জানি এটি ডিওএম-এর শর্তাধীন বিবরণের কারণে হয়েছে তবে দৃশ্যত আমি এর প্রাথমিক মানটি সঠিকভাবে ঘোষণা করছি না?

2. আমি কি getInitialState স্থিতিশীল করা উচিত

3. যদি getInitialState সঠিক না হয় তবে আমার প্রপটিপগুলি ঘোষণা করার উপযুক্ত জায়গাটি কোথায়?

হালনাগাদ:

   RadioOther.propTypes = {
       name: React.PropTypes.string,
       other: React.PropTypes.bool,
       options: React.PropTypes.array }

   module.exports = RadioOther;

@ এসোরালেন, এই কোড:

     constructor(props) {
         this.state = {
             otherChecked: false,
         };
     }

উত্পাদন করে "Uncaught ReferenceError: this is not defined", এবং নীচে যখন এটি সংশোধন করে

     constructor(props) {
     super(props);
         this.state = {
             otherChecked: false,
         };
     }

তবে এখন, অন্য বোতামটি ক্লিক করা এখন ত্রুটি তৈরি করে:

Uncaught TypeError: Cannot read property 'props' of undefined

Comments

ES6 ক্লাসের অন্যান্য পরিবর্তনটি হ'ল পদ্ধতিগুলি উদাহরণের সাথে "স্বয়ংক্রিয়ভাবে আবদ্ধ" হয় না, মানে আপনি যখন কোনও ফাংশনটি পাস করেন onChange={this.onRadChange}, thisযখন onRadChangeডাকা হয় তখন উদাহরণটিকে বোঝায় না । আপনি বেঁধে callbacks প্রয়োজন renderবা কন্সট্রাকটর এটা করুন: onChange={this.onRadChange.bind(this)}।

— রস অ্যালেন

Answer 1

• getInitialStateES6 ক্লাসে ব্যবহৃত হয় না। পরিবর্তে this.stateকনস্ট্রাক্টর বরাদ্দ করুন।
• propTypes স্ট্যাটিক ক্লাস ভেরিয়েবল হতে হবে বা ক্লাসে নির্ধারিত হওয়া উচিত, এটি উপাদান উপাদানগুলিতে বরাদ্দ করা উচিত নয়।
• সদস্য পদ্ধতিগুলি ES6 শ্রেণিতে "স্বয়ংক্রিয়ভাবে আবদ্ধ" নয় । কলব্যাক হিসাবে ব্যবহৃত পদ্ধতির জন্য, হয় শ্রেণি সম্পত্তি আরম্ভকারী ব্যবহার করুন বা কনস্ট্রাক্টরে আবদ্ধ দৃষ্টান্তগুলি বরাদ্দ করুন।

export default class RadioOther extends React.Component {

  static propTypes = {
    name: React.PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      otherChecked: false,
    };
  }

  // Class property initializer. `this` will be the instance when
  // the function is called.
  onRadChange = () => {
    ...
  };

  ...

}

ES6 ক্লাস সম্পর্কে প্রতিক্রিয়াটির ডকুমেন্টেশনে আরও দেখুন: একটি ফাংশনটিকে ক্লাসে রূপান্তর করা

Comments

এক বছর এবং এখন আপনি পেতে পারেন: Uncaught TypeError: Cannot read property 'bind' of undefinedত্রুটি কোনও ধারণা?

— জ্যামি হাটবার

@ জামিহট্টার আপনি কি আপনার কোড দিয়ে একটি নতুন প্রশ্ন তৈরি করতে পারেন? যদি পদ্ধতিটি ক্লাসে সংজ্ঞায়িত করা হয় তবে আমি জানি না আপনি কেন এই ত্রুটিটি পেয়েছেন।

— রস অ্যালেন

পরামর্শের জন্য ধন্যবাদ, কেনেথ ওয়ার্ডেন। আমি প্রতিক্রিয়া দস্তাবেজের জন্য একটি ইস্যু খুললাম: github.com/facebook/react/issues/7746

— রস অ্যালেন

'ওগুলিকে জায়গায় আবদ্ধ করুন' এর অর্থ কি উপরে প্রদর্শিত হিসাবে তীর ফাংশন ব্যবহার করবেন? এটি অবশ্যই কাজ করে। ওহ, জাভাস্ক্রিপ্ট!

— jofofrodo

@ জোমোফ্রোডো এটি দ্ব্যর্থক, এটি নির্দেশ করার জন্য ধন্যবাদ। আমি বোঝাতে চাইছি renderআপনি এর মতো কিছু করতে পারেন onClick={this.doFoo.bind(this)}তবে আমি ইচ্ছাকৃতভাবে এটিকে কোডটিতে অন্তর্ভুক্ত করি নি কারণ বাঁধাইয়ের সবচেয়ে কম দক্ষ উপায় যেহেতু renderপ্রায়শই বলা যেতে পারে এবং প্রতিটি কলে নতুন ফাংশন তৈরি করতে পারে। আমি উত্তরটি থেকে সেই ভাষাটি সরিয়ে দেব।

— রস অ্যালেন

Answer 2

রস এর উত্তর যোগ করা ।

আপনি অন ​​চেঞ্জ সম্পত্তিটিতে নতুন ES6 তীর ফাংশনটিও ব্যবহার করতে পারেন

এটি কার্যনির্বাহী হিসাবে নির্ধারক সংজ্ঞায়নের সমতুল্য this.onRadChange = this.onRadChange.bind(this);কিন্তু আমার মতে আরও সংক্ষিপ্ত।

আপনার ক্ষেত্রে রেডিও বোতামটি নীচের মত দেখাচ্ছে।

<input type="radio"
       ref="otherRadBtn"
       onChange={(e)=> this.onRadChange(e)}
       name={this.props.name}
       value="other"/>

হালনাগাদ

@ রস অ্যালেনের উত্তরে উল্লিখিত বিকল্পগুলির তুলনায় এই "আরও সংক্ষিপ্ত" পদ্ধতিটি কম দক্ষ কারণ কারণ প্রতিবার render()পদ্ধতিটি বলা হওয়ার পরে এটি একটি নতুন ফাংশন তৈরি করে

Comments

এই সমাধানটি কার্যত সঠিক, তবে এটি প্রতিটি কলটিতে একটি নতুন ফাংশন তৈরি করে render(যা বহুবার বলা যেতে পারে)। কোনও শ্রেণীর সম্পত্তি ইনিশিয়ালাইজার ব্যবহার করে বা কনস্ট্রাক্টারে বাঁধাইয়ের মাধ্যমে, উপাদানটি নির্মাণের সময় কেবল একটি নতুন বাউন্ড ফাংশন তৈরি করা হয় এবং কোনও নতুন ফাংশন তৈরি করা হয় না render।

— রস অ্যালেন

Answer 3

আপনি যদি ব্যাবেল-প্লাগ-ইন-ট্রান্সফর্ম-ক্লাস-প্রপার্টি বা ব্যাবেল-প্রিসেট-স্টেজ -২ (বা পর্যায় -১, বা পর্যায় -০) ব্যবহার করছেন তবে আপনি এই বাক্য গঠনটি ব্যবহার করতে পারেন:

class RadioOther extends React.Component {

  static propTypes = {
    name: React.PropTypes.string,
    ...
  };

  state = {
      otherChecked: false,
  };

  onRadChange = () => {
    ...
  };

  ...

}