반응, ES6-getInitialState가 일반 JavaScript 클래스에 정의되었습니다.

반응, ES6-getInitialState가 일반 JavaScript 클래스에 정의되었습니다.

---

다음과 같은 구성 요소가 있습니다 ( 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 경고가 표시되고 후속 질문이 있습니다.

오류 : catch되지 않은 TypeError : null의 'otherChecked'속성을 읽을 수 없습니다

경고 : getInitialState는 일반 JavaScript 클래스 인 RadioOther에 정의되었습니다. 이는 React.createClass를 사용하여 작성된 클래스에만 지원됩니다. 상태 속성을 대신 정의 하시겠습니까?

---

1. 누구든지 오류가 어디에 있는지 알 수 있습니까, DOM의 조건문 때문이라는 것을 알고 있지만 초기 값을 올바르게 선언하지 않는 것 같습니다.

2. getInitialState를 정적으로 만들어야합니까?

3. Where is the appropriate place to declare my proptypes if getInitialState is not correct?

UPDATE:

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

   module.exports = RadioOther;

@ssorallen, this code :

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

produces "Uncaught ReferenceError: this is not defined", and while below corrects that

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

but now, clicking the other button now produces error:

Uncaught TypeError: Cannot read property 'props' of undefined

---

• getInitialState is not used in ES6 classes. Instead assign this.state in the constructor.
• propTypes should be a static class variable or assigned to the class, it should not be assigned to component instances.
• Member methods are not "auto-bound" in ES6 classes. For methods used as callbacks, either use class property initializers or assign bound instances in the constructor.

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 = () => {
    ...
  };

  ...

}

See more in the React's documentation about ES6 Classes: Converting a Function to a Class

---

Adding to Ross's answer.

You could also use the new ES6 arrow function on the onChange property

It is functionally equivalent to defining this.onRadChange = this.onRadChange.bind(this); in the constructor but is more concise in my opinion.

In your case the the radio button will look like the below.

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

Update

This "more concise" method is less efficient than the options mentioned in @Ross Allen's answer because it generates a new function each time the render() method is called

---

If you are using babel-plugin-transform-class-properties or babel-preset-stage-2 (or stage-1, or stage-0), you can use this syntax:

class RadioOther extends React.Component {

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

  state = {
      otherChecked: false,
  };

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

  ...

}

참고URL : https://stackoverflow.com/questions/30720620/react-es6-getinitialstate-was-defined-on-a-plain-javascript-class