reactjs - not - set props react

Reaccionar, ES6: getInitialState se definió en una clase de JavaScript simple

Question

Tengo el siguiente componente ( 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>
         )
     }
 };

Antes de usar ECMAScript6 todo estaba bien, ahora recibo 1 error, 1 advertencia y tengo una pregunta de seguimiento:

Error: Error de tipo no capturado: no se puede leer la propiedad ''otherChecked'' de null

Advertencia: getInitialState se definió en RadioOther, una clase de JavaScript simple. Esto solo es compatible con las clases creadas con React.createClass. ¿Querías definir una propiedad estatal en su lugar?

1. ¿Alguien puede ver dónde se encuentra el error, sé que se debe a la declaración condicional en el DOM pero aparentemente no estoy declarando su valor inicial correctamente?

2. ¿Debo hacer que getInitialState sea estático?

3. ¿Dónde está el lugar apropiado para declarar mis proptypes si getInitialState no es correcto?

ACTUALIZAR:

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

   module.exports = RadioOther;

@ssorallen, este código:

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

produce "Uncaught ReferenceError: this is not defined" , y mientras que a continuación corrige eso

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

pero ahora, al hacer clic en el otro botón ahora se produce un error:

Uncaught TypeError: Cannot read property ''props'' of undefined

Answer 1

Agregando a la respuesta de Ross .

También puede usar la nueva función de flecha ES6 en la propiedad onChange

Es funcionalmente equivalente a definir this.onRadChange = this.onRadChange.bind(this); en el constructor pero es más conciso en mi opinión.

En su caso, el botón de opción tendrá el siguiente aspecto.

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

Actualizar

Este método "más conciso" es menos eficiente que las opciones mencionadas en la respuesta de @Ross Allen porque genera una nueva función cada vez render() se llama al método render()

Answer 2

Si está utilizando babel-plugin-transform-class-properties o babel-preset-stage-2 (o stage-1 o stage-0), puede usar esta sintaxis:

class RadioOther extends React.Component {

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

  state = {
      otherChecked: false,
  };

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

  ...

}

Answer 3

• getInitialState no se usa en las clases de ES6. En su lugar, asigne this.state en el constructor.
• propTypes debe ser una variable de clase estática o asignada a la clase, no debe asignarse a instancias de componentes.
• Los métodos de miembro no están "auto-bound" en las clases de ES6. Para los métodos utilizados como devoluciones de llamada, use inicializadores de propiedades de clase o asigne instancias enlazadas en el 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 = () => {
    ...
  };

  ...

}

Ver más en la documentación de React sobre las clases de ES6: Convertir una función en una clase