Uncaught TypeError：无法读取未定义的属性“ Checked”-ReactJS
我正在尝试在ReactJS中创建一个简单的TODO列表应用程序。我对React的基础知识不太清楚，所以我被困在这里。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>React TODO</title>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" lang="ja">
var TodoList = React.createClass({
Checked: function(e) {
alert("Checked");
},
render: function() {
var createItem = function(item) {
return <li key={item.id}>{item.text}<input type="checkbox" onChange={this.Checked} /></li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onButtonClick: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onButtonClick} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
ReactDOM.render(<TodoApp />, document.getElementById('example'));
</script>
</body>
</html>
生成每个列表后，将为其分配一个复选框。代码在没有onChange事件到Checkbox的情况下工作正常。但是，将“已检查”功能分配给它时，会产生错误。
未捕获的TypeError：无法读取未定义的属性“已检查”
提前致谢
问题答案：
您需要设置this的.map（你可以做到这一点通过第二个参数.map）
return <ul>{this.props.items.map(createItem, this)}</ul>;
Example
因为现在createItem this是指全球（在浏览器中它会window），得分（或者，如果你使用会）strict mode this``undefined
使用时，babel您还可以使用箭头功能
var createItem = (item) => {
return <li key={item.id}>
{item.text}<input type="checkbox" onChange={this.Checked} />
</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
Example
-
我试图在ReactJS中创建一个简单的TODO列表应用程序。我的基本反应不是很清楚，所以我被困在这里。 每生成一个列表，都会给它分配一个复选框。如果没有onChange事件to复选框，代码工作正常。但是当“checked”函数被分配给它时，就会产生错误。
-
为什么我得到这个错误不能读取未定义的触摸属性？ 为什么它不能读取，但它可以读取 当我们使用
-
问题内容： 我正在制作非常简单的react应用。但是，当我尝试通过onChange事件调用父（实际上是祖父母）组件的方法时，我一直在获取。 这是触发事件的组件/表单（因此，在绑定的父组件上调用方法…是的，因为我通过道具将其从父组件传递下来，所以在方法上使用了.bound（this）。） 这是我如何通过大多数父（祖父母）组件中的props传递该方法的方法。 这是我作为父项（方法所有者和方法调用程序之
-
我正在测试发送电子邮件与流星js和nodemailer插件： 流星添加捷运：流星NodeEmailer 当页面加载时，我在导航器的控制台上看到错误：无法读取未定义的属性“创建运输”。 那么问题是什么呢？ 代码如下： /////////////////////////////////////////// ///////////////
-
我知道这方面还有很多类似的问题，但没有一个答案是有效的。在我的例子中，我有下面的代码，我正在尝试按分数降序排列记录数组。 最后一个函数是什么给我的问题.如果用户运行以下： var web=[{url:“www.southanpton.ac.uk”，内容：“南安普敦大学提供学位课程和世界一流的研究测试。”，{url:“www.xyz.ac.uk”，内容：“另一种大学考试”}，{url:“www”，内
-
我一直试图让firebase与react一起工作，但出现了此错误 未经处理的拒绝（TypeError）：无法读取未定义的fetch D:/Peti/Programming/node/coursewebpage/src/components/coursePage.js:12 9 | const db=firebase.firestore（）10 | const myAuthLevel=（fireba