React, ES6 - getInitialState a été défini sur une classe JavaScript simple

J'ai le composant suivant ( 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>
         )
     }
 };

Avant d'utiliser ECMAScript6, tout allait bien, maintenant je reçois 1 erreur, 1 avertissement et j'ai une question de suivi:

Erreur: Uncaught TypeError: Impossible de lire la propriété 'otherChecked' de null

Attention: getInitialState a été défini sur RadioOther, une classe JavaScript simple. Ceci n'est pris en charge que pour les classes créées à l'aide de React.createClass. Vouliez-vous plutôt définir une propriété d'état?

1. Quelqu'un peut-il voir où se trouve l'erreur, je sais que c'est dû à l'instruction conditionnelle dans le DOM mais apparemment je ne déclare pas sa valeur initiale correctement?

2. Dois-je rendre getInitialState statique

3. Où est l'endroit approprié pour déclarer mes proptypes si getInitialState n'est pas correct?

METTRE À JOUR:

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

   module.exports = RadioOther;

@ssorallen, ce code:

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

produit "Uncaught ReferenceError: this is not defined", et en dessous corrige que

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

mais maintenant, cliquer sur l'autre bouton produit maintenant une erreur:

Uncaught TypeError: Cannot read property 'props' of undefined

• getInitialStaten'est pas utilisé dans les classes ES6. Attribuez plutôtthis.state dans le constructeur.
• propTypes doit être une variable de classe statique ou attribuée à la classe, elle ne doit pas être affectée aux instances de composant.
• Les méthodes membres ne sont pas "liées automatiquement" dans les classes ES6. Pour les méthodes utilisées comme rappels, utilisez des initialiseurs de propriété de classe ou affectez des instances liées dans le constructeur.

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

  ...

}

Pour en savoir plus, consultez la documentation de React sur les classes ES6: Conversion d'une fonction en classe

Ajout à la réponse de Ross .

Vous pouvez également utiliser la nouvelle fonction de flèche ES6 sur la propriété onChange

C'est fonctionnellement équivalent à définir this.onRadChange = this.onRadChange.bind(this); dans le constructeur mais est plus concis à mon avis.

Dans votre cas, le bouton radio ressemblera à celui ci-dessous.

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

Mettre à jour

Cette méthode "plus concise" est moins efficace que les options mentionnées dans la réponse de @Ross Allen car elle génère une nouvelle fonction à chaque fois que la render()méthode est appelée

Si vous utilisez babel-plugin-transform-class-properties ou babel-preset-stage-2 (ou stage-1 ou stage-0), vous pouvez utiliser cette syntaxe:

class RadioOther extends React.Component {

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

  state = {
      otherChecked: false,
  };

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

  ...

}