が反応：チェックして、私は、これはコンポーネントに反応書い

Question

]チェックボックスをオフにする方法：

import React from 'react'; 

export default class Todo extends React.Component { 
    constructor(props) { 
     super(props); 

     // Set initial state 
     this.state = { 
      data: props.data 
     } 
    } 

    changeStatus() { 
     // This throws: Uncaught TypeError: Cannot read property 'state' of undefined 
     console.log(this.state); 
     console.log('status changed'); 
    } 

    render() { 
     let status = this.state.data.opened ? 'opened' : 'closed'; 
     return (
      <li className={"todo " + status} data-endpoint={this.state.data['@id']}> 
       <div className="status"> 
        <input type="checkbox" checked={!this.state.data.opened} onChange={this.changeStatus}/> 
       </div> 
       <a href={window.Routing.generate('todo_list_todo_show', {account: this.props.todoList.account.id, list: this.props.todoList.id, todo: this.state.data.id}, true)}>{this.state.data.name}</a> 
      </li> 
     ); 
    } 
} 

私は、チェックボックスは、データベース内の行を更新するために、サーバーへの呼び出しに応じて、チェックしてチェックを外していることを望みます。

残念ながらconsole.log()は例外をスロー：

Uncaught TypeError: Cannot read property 'state' of undefined

at changeStatus (Todo.jsx:20)

私は、ステータスの変更を処理する方法にstateにアクセスするにはどうすればよいですか？

Answer 1

バインドあなたのコンストラクタでchangeStatus方法 -

constructor(props) { 
     super(props); 

     // Set initial state 
     this.state = { 
      data: props.data 
     } 
     this.changeStatus = this.changeStatus.bind(this); 

    } 

結合がhere必要な理由あなたが読むことができます。

Answer 2

ES6を使用している場合は、矢印機能を使用してバインドを入力しないでください。

このようにしてthisが自動的に関数にバインドされます。

changeStatus =() => { 
     // This throws: Uncaught TypeError: Cannot read property 'state' of undefined 
     console.log(this.state); 
     console.log('status changed'); 
    } 

Arrow Functions lexically bind their context so this actually refers to the originating context.