Reagire, ES6 - getInitialState è stato definito su una pianura JavaScript classe

Question

Ho il seguente 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> 
     ) 
    } 
}; 

Prima di utilizzare ECMAScript6 tutto andava bene, ora sto ottenendo 1 errore, 1 avvertimento e io avere una domanda followup:

Error: Uncaught TypeError: Cannot read property 'otherChecked' of null

Warning: getInitialState was defined on RadioOther, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

---

1. chiunque può vedere dove le bugie di errore, lo so che è dovuto l'istruzione condizionale nel DOM ma apparentemente non sto dichiarando correttamente il suo valore iniziale?

2. Devo fare getInitialState statico

3. Dove è il luogo adatto per dichiarare i miei proptypes se getInitialState non è corretta?

UPDATE:

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

    module.exports = RadioOther; 

@ssorallen, questo codice:

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

produce "Uncaught ReferenceError: this is not defined", e mentre sotto corregge che

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

ma ora, cliccando l'altro pulsante ora produce errore:

Uncaught TypeError: Cannot read property 'props' of undefined

Answer 1

• getInitialState non viene utilizzato nelle classi ES6. Assegnare invece this.state nel costruttore.
• propTypes deve essere una variabile di classe statica o assegnata alla classe, non deve essere assegnata alle istanze del componente.
• I metodi membri non sono "auto-bound" nelle classi ES6. Per i metodi utilizzati come callback, utilizzare class property initializers o assegnare istanze associate nel costruttore.

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

    ... 

} 

Visualizza maggiori nella documentazione del React su Classes ES6: https://reactjs.org/docs/state-and-lifecycle.html#converting-a-function-to-a-class

Answer 2

Aggiungendo a Ross's risposta.

Si potrebbe anche usare la nuova ES6 arrow function sulla proprietà onChange

E 'funzionalmente equivalente alla definizione this.onRadChange = this.onRadChange.bind(this); nel costruttore, ma è più conciso, a mio parere.

Nel tuo caso il pulsante di opzione avrà il seguente aspetto.

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

Aggiornamento

Questo metodo "più conciso" è meno efficiente rispetto alle opzioni di cui la risposta di @Ross Allen perché genera una nuova funzione ogni volta che il metodo render() viene chiamato

Answer 3

Se si utilizza babel-plugin-transform-class-properties o babel-preset-stage-2 (o stage-1 o stage-0), è possibile utilizzare questa sintassi:

class RadioOther extends React.Component { 

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

    state = { 
     otherChecked: false, 
    }; 

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

    ... 

}