ReactJS无法读取未定义的属性“绑定”[重复]

2024-01-14

我正在尝试通过制作一些简单的应用程序来学习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")
);

你应该设置this for .map, 因为this in .map回调没有引用Wrapper,它指的是全局范围(在浏览器中它是窗口)或者如果您使用严格模式它将是undefined

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

Example https://jsfiddle.net/69z2wepo/27869/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS无法读取未定义的属性“绑定”[重复] 的相关文章

  • 将浮点值转换为灰度十六进制颜色值

    这个问题又快又简单 我有一个二维浮点数组 0 0000000 到 1 0000000 我想将这些数字转换为颜色值 000000 到 ffffff 请注意 我所说的只是灰度值 0 黑色 0 5 中灰色 1 白色 有谁知道如何用 javascr
  • 旋转嵌套 SVG

    我在用SVG js http svgjs com并尝试使用 SVG 进行一些操作 我以前使用过 canvas 但我对其生成的图像质量非常失望 因此我决定使用纯 SVG 我设法将所有内容都改为纯 SVG 方法 除了一件事 旋转 我无法让它发挥
  • 如果重复,则从数组中删除两个值 - JavaScript/jQuery

    我这里有一个数组 var myArr 1 1 2 5 5 7 8 9 9 现在我想删除重复的两个外观 所以想要的结果是not var myArr 1 2 5 7 8 9 but var myArr 2 7 8 基本上我知道如何删除重复项 但
  • 使用 jQuery 触发真实事件

    看来 jQuery 的trigger 仅运行与 jQuery 绑定的事件处理程序 我有一些使用本机浏览器事件绑定的模块 使用来自的代码https stackoverflow com a 2676527 https stackoverflow
  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显
  • d3js v5 + Topojson v3 关于加入 csv 和 json 的优化

    为了制作地图 我需要将一些值从 csv 导入到 json直接在代码中 为了加载 json 和 csv 文件 我使用 Promise 对象的异步操作 并使用两个循环和一个公共键在 json 文件上添加新属性 for var i 0 i lt
  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents
  • Elasticsearch 前缀匹配消失且未添加 (QueryString)

    结转自Elasticsearch QueryStrings 部分匹配 NOT 查询 https stackoverflow com questions 40100006 elasticsearch querystrings partiall
  • 在 Graal.js 中使用 java 类

    使用 Graal js 如何将 java 类导入到 JS 脚本中 以下代码适用于 Nashorn JJS 但不适用于 Graal js 因为没有Java type 在graal中 我需要在某个时候调用truffle吗 var ArrayLi
  • 用 JavaScript 改变文本颜色?

    我想在单击按钮时更改标题的颜色 这是我的代码 但它不起作用 我不明白为什么不 var about function init about document getElementById about innerHTML about style
  • 具有多种布局的 React Router v4

    我想在我的公共布局中渲染一些路线 并在我的私人布局中渲染一些其他路线 有没有一种干净的方法可以做到这一点 显然不起作用的示例 但我希望大致解释我正在寻找的内容
  • 接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足

    我正在使用 Angular 7 2 当我进入ng serve 我面临以下问题 致命错误 接近堆限制的无效标记压缩分配失败 JavaScript 堆内存不足 这意味着什么 我该如何解决这个问题 完整的错误消息是 FATAL ERROR Ine
  • useState 以 `new` 关键字作为参数

    我正在构建一个单独的服务来处理复杂的事情 该服务是一个类 只是为了测试建议 我在一个内部模拟useState 重点是我忘记了一个console log在构造函数内部 并意识到类构造函数在组件重新渲染时被调用多次 这种行为不会导致意外的行为或
  • 返回不在函数中

    Firebug 报告 返回不在函数中 错误 没有位置 好吧 第 1 行什么都没有 我怎样才能找到这个错误的根源 return not in function Break on this error return 0 javascript r
  • 地理编码服务与 gMap 搜索之间的差异结果

    我想获取此地址的纬度和经度 Boulevard de la Marne Zone industrielle COULOMMIERS 77120 France 我将 api 添加到我的页面 当我使用 gmaps 时 结果很好 但是当我想通过
  • React:设置 State 或设置 Prop 而无需重新渲染

    Problem 目前 我有一个LoginForm具有 成功 处理函数的组件handleOnSuccess 然后将其链接到父组件onTokenUpdate由 令牌更新 处理函数定义的属性handleUpdateToken 问题是setStat
  • Typescript 和 React 使用空类型数组设置初始状态

    假设我有以下片段 interface State alarms Alarm export default class Alarms extends React Component lt State gt state alarms 因为我想设
  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的
  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon
  • 在 JSON 对象中存储和发送原始文件数据

    我正在寻找一种方法来传输任何文件类型的原始文件数据和任何可能的内容 我的意思是文件和文件内容都是用户生成的 在 Backbone 前端中使用 xhr ajax 调用两种方式针对 Django 后端 编辑 也许问题仍然不清楚 如果您在 IDE

随机推荐