Question

我正在使用React.js而我正在创建一个待办事项应用程序。

内容大致与此代码相似。

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>
    );
  }
}

为什么我无法在复选框中找到onChange功能？

省略了更新信息的输入和按钮。

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

一种选择是使用es6箭头功能

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

另一种方法是利用内置constructor方法的React。在这里，您应该将_onChange方法绑定到组件。

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

然后你可以使用

Checkbox onClick={this._onChange}

为什么onClick在我的复选框中未定义？

2 个答案: