未捕获的类型错误:无法读取未定义的属性“已检查"-ReactJS [英] Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS
问题描述
我正在尝试在 ReactJS 中创建一个简单的待办事项列表应用程序.我对 React 的基础不是很清楚，所以我被困在这里.
<头><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><身体><div id="示例"></div><script type="text/babel" lang="ja">var TodoList = React.createClass({检查:功能(e){警报(检查")；},渲染:函数(){var createItem = function(item) {return <li key={item.id}>{item.text}<input type="checkbox" onChange={this.Checked}/></li>;};返回 {this.props.items.map(createItem)}
;}});var TodoApp = React.createClass({getInitialState: 函数() {返回 {items: [], text: ''};},onButtonClick: 函数(e) {this.setState({text: e.target.value});},句柄提交:函数(e){e.preventDefault();var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);var nextText = '';this.setState({items: nextItems, text: nextText});},渲染:函数(){返回 (<div><h3>待办事项</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></表单>);}});ReactDOM.render(
生成的每个列表都会为其分配一个复选框.代码在没有 onChange 事件到复选框的情况下工作正常.但是当给它分配了Checked"功能时，就会产生错误.
未捕获的类型错误:无法读取未定义的属性已检查"
提前致谢
You need set this for .map (你可以通过 .map)
return {this.props.items.map(createItem, this)}
;因为现在在 createItem this 指的是全局(在浏览器中它将是 window)分数(或者如果你使用 严格模式 this 将是 undefined)
当您使用 babel 时，您也可以使用 箭头函数
var createItem = (item) =>{return {item.text}<input type="checkbox" onChange={this.Checked}/> ;};返回 {this.props.items.map(createItem)}
;I am trying to create a simple a TODO list app in ReactJS. My basics of React are not very clear so I am stuck here.
<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>
With every list generated, a checkbox is assigned to it . Code works fine without onChange event to Checkbox. But when "Checked" function is assigned to it, error is generated.
Uncaught TypeError: Cannot read property 'Checked' of undefined
Thanks in advance
You need set this for .map (you can do that through second argument in .map)
return <ul>{this.props.items.map(createItem, this)}</ul>;
because now in createItem this refers to global (in browsers it will be window) score (or if you use strict mode this will be undefined)
as you use babel you also can use arrow functions
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>;
这篇关于未捕获的类型错误:无法读取未定义的属性“已检查"-ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
