我还在学习ReactJS。我正在挑战自己编写一个非常基本的待办应用程序(就像一个人一样),并且在调用onClick函数时遇到问题。
var List = React.createClass({ handleClick: function () { alert("Clicked!"); }, render: function () { var list = this.props.items; var items = list.map(function(item){ return ( <li style={{borderBottom:'1px solid red'}}> <label onClick={this.handleClick}> <input type="checkbox" /> {item} </label> </li> ); }); return ( <ul>{items}</ul> ) } });
这里的问题是onClick={this.handleClick}无法调用,因为它不在render函数的return调用内。
onClick={this.handleClick}
我需要怎么做才能从map函数内部访问handleClick?
您遇到的问题是,您对的调用list.map将以与this您的render方法不同的方式调用传递的函数。
list.map
this
render
一个简单的解决方法是获取this外部作用域并将其存储在变量中,然后在内联函数中使用该变量。
render: function () { var self = this; // ^^^^^^^^^^^^^^^^ var list = this.props.items; var items = list.map(function(item){ return ( <li style={{borderBottom:'1px solid red'}}> <label onClick={self.handleClick}> // ^^^^ <input type="checkbox" /> {item} </label> </li> ); }); return ( <ul>{items}</ul> ) }