REACT onChange diesen Fehler binden

Question

So habe ich diesen Code REACT, die funktionieren sollte:

App.jsx:

class App extends Component { 
    constructor(props){    
     super(props); 
     this.state = {count: props.initialCount}; 
     this.onChange = this.onChange.bind(this); 
     this.state = { 
      questions:[ 
       { 
        id: 1, 
        text: 'What is your name ?', 
        choices: [ 
         { 
          id: 'a', 
          text: 'Michael' 
         }, 
         { 
          id: 'b', 
          text: 'Brad' 
         }, 
         { 
          id: 'c', 
          text: 'Steven' 
         } 
        ], 
        correct: 'b' 
       }, 
       { 
        id: 2, 
        text: 'What is your mothers name ?', 
        choices: [ 
         { 
          id: 'a', 
          text: 'Sara' 
         }, 
         { 
          id: 'b', 
          text: 'Sue' 
         }, 
         { 
          id: 'c', 
          text: 'Donna' 
         } 
        ], 
        correct: 'c' 
       },    
       { 
        id: 3, 
        text: 'What is your father name ?', 
        choices: [ 
         { 
          id: 'a', 
          text: 'Bobby' 
         }, 
         { 
          id: 'b', 
          text: 'Harry' 
         }, 
         { 
          id: 'c', 
          text: 'Wayne' 
         } 
        ], 
        correct: 'a' 
       },        
       { 
        id: 4, 
        text: 'What is your friend name ?', 
        choices: [ 
         { 
          id: 'a', 
          text: 'John' 
         }, 
         { 
          id: 'b', 
          text: 'Paul' 
         }, 
         { 
          id: 'c', 
          text: 'Dan' 
         } 
        ], 
        correct: 'c' 
       }    
      ], 
      score: 0, 
      current: 1 
     }  
    } 
    render(){ 
     return(
      <div onClick={this.onChange}> 
       <QuestionList {...this.state} /> 
      </div> 
     ) 
    } 
} 

export default App 

QuestionList.jsx:

class QuestionList extends Component { 
    render(){ 
     return(
      <div className="questions"> 
       { 
        this.props.questions.map(question => { 

         return <Question question={question} key={question.id} {...this.props} /> 

        }) 
       } 
      </div> 
     ) 
    } 
} 

export default QuestionList 

Question.jsx:

class Question extends Component { 
    render(){ 
     const {question} = this.props; 
     return(
      <div className="well"> 
       <h3 >{question.text}</h3> 
       <hr /> 
       <ul className="list-group"> 
        { 
         this.props.question.choices.map(choice => { 
          return(
           <li className="list-group-item"> 
            {choice.id} <input type="radio" name={question.id} value={choice.id} /> {choice.text} 
           </li> 
          ) 
         }) 
        } 
       </ul> 
      </div> 
     ) 
    } 
} 

export default Question 

außer es wirft diese er ror in der Konsole: Typeerror: _this.onChange ist nicht definiert

ich es googeln und fand heraus, dass:

Make sure you do this.onChange = this.onChange.bind(this) in your constructor

Aber wenn ich hinzufügen, dass auf meinem Controller ich diese Fehlermeldung erhalten: Typeerror: diese. onChange undefiniert

Answer 1

class Question extends Component { 
    onChange(e) { 
     //Your change code here!! 
    } 
    render(){ 
     const {question} = this.props; 
     return(
      <div className="well"> 
       <h3 >{question.text}</h3> 
       <hr /> 
       <ul className="list-group"> 
        { 
         this.props.question.choices.map(choice => { 
          return(
           <li className="list-group-item"> 
            {choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text} 
           </li> 
          ) 
         }) 
        } 
       </ul> 
      </div> 
     ) 
    } 
} 

export default Question 

Sie sollten eine onChange Methode in Ihrer Klasse.

Answer 2

Wenn Sie es setzen möchten in der constructor Sie es so tun müssen:

Hinweis: dies ist ein Beispiel von der docs reagieren, die unter

export class Counter extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
    this.onChange = this.onChange.bind(this); 
    } 
    onChange() {} // add this 

    render() { 
    return (
     <div onClick={this.onChange}> 
     Clicks: {this.state.count} 
     </div> 
    ); 
    } 
} 

docs verknüpft sind: https://facebook.github.io/react/docs/reusable-components.html#es6-classes