ReactJS无法读取未定义的属性“ bind”

托马斯·达尔维克

我试图通过制作一些简单的应用程序来学习reactjs。我以为自己已经弄懂了基础知识，直到偶然发现使用.bind的情况。我正在尝试制作一个小的列表，当单击该列表时，它将删除单击的列表项。由于我不断遇到相同的错误，因此尚未实现其背后的逻辑。我已经浏览了其他问题，但是由于某种原因，我未能使其正常工作，因此，如果将其重新发布，对不起。

"Cannot read property 'bind' of undefined"

有问题的代码在下面实现。我真的很感谢在此方面的一些帮助。我知道这是一个非常基本的问题，但嘿。不能总是完美的。

var React = require("react");
var ReactDOM = require("react-dom");

var dataList = ["Apples","Bananas", "Oranges", "Pinapple"];

var Wrapper = React.createClass({
	handleClick: function(item, event) {
		console.log("clicked");
	},
	render: function() {
		var allData = this.props.datalist;
		return(
			<div>
				<ul>
					{allData.map(function(listpoint,i) {
						return(
							<li onClick={this.handleClick.bind(this,listpoint)} key={"list" + i}>{listpoint} [{i}]</li>
						);
					})}
				</ul>
			</div>
		);
	}
});

ReactDOM.render(
	<Wrapper datalist={dataList}/>,
	document.getElementById("container")
);

Oleksandr T.

您应该设置this为.map，因为this在.map回调函数中未引用Wrapper，它引用的是全局范围（在浏览器中是窗口），或者如果使用严格模式，它将是undefined

allData.map(function(listpoint,i) {
  return <li 
    onClick={this.handleClick.bind(this,listpoint)} 
    key={"list" + i}>{listpoint} [{i}]</li>;
}, this);
__^^^^^^

Example

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。