grundlegende Kontrollkästchen in react.js

Ich begann gerade zu lernen Reagieren und versuchen, sehr einfache Kontrollkästchen Komponente zu machen und Fehler Uncaught TypeError: Kann nicht lesen 'checked' von Null, die ich nicht herausfinden konnte, warum ich bin bekommen so kann jemand bitte mir helfen?grundlegende Kontrollkästchen in react.js

<div id="react-container"> 
    </div> 
    <script type="text/babel"> 

    class Checkedbox extends React.Component{ 
     initialState(){ 
      return { checked: false } 
     }; 
     handelCheck(){ 
      this.setState({checked: !this.state.checked }) 
     }; 
     render(){ 
      var msg ; 
      if(this.state.checked){ 
       msg = 'Agree'; 
      } else { 
       msg = 'Disagree'; 
      } 
      return (
        <div> 
         <label for="mybox"> Opinion : </label> 
         <input type="checkbox" id="mybox" onChange={this.handleCheck} 
           defaultChecked={this.state.checked}/> 
         <p>Hi i {msg} with it!</p> 
        </div> 
      ) 
     }; 
    } 
    let target = document.getElementById('react-container'); 
    ReactDOM.render( < Checkedbox />,target) 
    </script>

Quelle

2016-06-03 Waqar

onChange={this.handleCheck}

Änderung

onChange={this.handleCheck.bind(this)}

Quelle

2016-06-03 04:22:13

Änderung initial(), um getInitialState().

Quelle

2016-06-03 04:23:27

ja i geändert und bekam eine Warnmeldung „getInitialState wurde auf Checkedbox definiert, eine einfache JavaScript-Klasse. Dies ist nur für die Klassen mit React.createClass erstellt unterstützt wird.“ und immer noch dieselbe Fehlermeldung. – Waqar

Benötigen Sie React und ReactDOM richtig? –

Pflege für eine Referenz, wie eine Dokumentation, die den Unterschied erklärt? – dakab

Ich denke, this nicht auf das eigentliche Element gehört:

handelCheck(){ 
    let that = this; 
    this.setState({checked: !that.state.checked }) 
};

Quelle

2016-06-03 04:30:54 Jai

gleiche Warnung und Fehlermeldung. Können wir getInitialState() verwenden, selbst wenn wir eine Komponente mit der ** class ** -Syntax deklarieren? – Waqar

diesen Code Versuchen. Es sollte funktionieren

class Checkedbox extends React.Component{ 
      constructor(){ 
       super(); 
       this.state = { checked: false } 
      } 
      handleCheck =() => { 
       this.setState({checked: !this.state.checked }) 
      } 
      render(){ 
       var msg ; 
       if(this.state.checked){ 
        msg = 'Agree'; 
       } else { 
        msg = 'Disagree'; 
       } 
       return (
         <div> 
          <label for="mybox"> Opinion : </label> 
          <input type="checkbox" id="mybox" onChange={this.handleCheck} 
            defaultChecked={this.state.checked}/> 
          <p>Hi i {msg} with it!</p> 
         </div> 
       ) 
      }; 
     } 
     let target = document.getElementById('react-container'); 
     ReactDOM.render( < Checkedbox />,target)

Quelle

2016-06-03 05:11:25

grundlegende Kontrollkästchen in react.js

Antwort

Verwandte Themen