なぜ私のチェックボックスの中でonClickが未定義ですか？

Question

私はReact.jsを使用していますが、Todoアプリを作成しています。

内容はこのコードにほぼ似ています。私は、チェックボックスにonChange機能を見つけることができないのはなぜ

class TodoValue extends React.Component{ 

    _onChange(){ 
    console.log("atacked"); 
    } 

    render(){ 
    return(
     <List> 
      { 
      this.props.todos.map(function(todo, i){ 
       return <ListItem key={i} primaryText={todo.item} rightIcon={<ActionInfo />} leftCheckbox={<Checkbox onClick={this._onChange.bind(this)} />} /> 
      }) 
      } 
     </List> 
    ); 
    } 
} 

？

更新情報の入力とボタンは省略されています。

Answer 1

あなたのコンストラクタに宣言を追加します。

class TodoValue extends React.Component{ 
 
    constructor() { 
 
    super() 
 
    this._onChange = this._onChange.bind(this) 
 
    } 
 
    _onChange(){ 
 
    console.log("atacked"); 
 
    } 
 

 
    render(){ 
 
    return(
 
     <List> 
 
      { 
 
      this.props.todos.map(function(todo, i){ 
 
       return <ListItem key={i} primaryText={todo.item} rightIcon={<ActionInfo />} leftCheckbox={<Checkbox onClick={this._onChange.bind(this)} />} /> 
 
      }) 
 
      } 
 
     </List> 
 
    ); 
 
    } 
 
}

が追加constructorに注意してください。

詳しくはhereをご覧ください。

Answer 2

1つのオプションは、別のアプローチは、のconstructor方法で構築を反応させるのに利用するだろう

Checkbox onClick={()=> this._onChange.bind(this)} 

es6矢印機能を使用することです。ここでは、_onChangeメソッドをコンポーネントにバインドする必要があります。

constructor(props) { 
    super(); 
    this._onChange = this._onChange.bind(this) 
    } 

次にあなたが

Checkbox onClick={this._onChange}