试图将onChange函数作为道具传递给GrandChlidren,结果是TypeError:这是未定义的
Trying to pass onChange function as props to GrandChlidren result into TypeError: this is undefined
我试图将onChange函数从父级传递给grandChild,但收到错误
TypeError: this is undefined
代码如下
var Tablefortask = React.createClass({
getInitialState: function() {
return {data: []};
},
onChange: function (e) {
var employeeId = e.target.value;
alert(employeeId);
},
render: function() {
return (
<div className="border-basic-task col-md-12">
<div className="col-md-12">
<table className="table table-condensed table-bordered table-striped-col " id="table-data">
<thead>
<tr align="center">
<th>Task Name</th>
<th >Standard Discription of Task</th>
<th>Employee Comment</th>
<th >Employee Rating</th>
<th width="30%">Reviewer Comment</th>
<th >Reviewer Rating</th>
</tr>
</thead>
<TablefortaskList data={this.state.data} onChange={this.onChange} />
</table>
</div>
</div>
);
}
});
var TablefortaskList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Addcontenttotable onChange= {this.props.onChange} taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emp_comment} empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment} reviewRating={comment.review_rating} >
</Addcontenttotable>
);
});
return (
<tbody>{commentNodes}</tbody>
);
}
});
var Addcontenttotable = React.createClass({
render: function() {
if(this.props.reviewComment=== "" && this.props.reviewRating === '' ){
return (
<tr><td>{this.props.taskName}</td>
<td>{this.props.standarDescription}</td>
<td>{this.props.emplComment}</td>
<td width="5%">{this.props.empRating}</td>
<td ><textarea
className="form-control"
name="empComment"
placeholder="Employee Comment"
/>
</td>
<td>
<select
className="form-control"
onChange={this.props.onChange}
data-placeholder="Basic Select2 Box" >
<option value="">Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
);
}
else {
return (
<tr><td>{this.props.taskName}</td>
<td>{this.props.standarDescription}</td>
<td>{this.props.emplComment}</td>
<td>{this.props.empRating}</td>
<td>{this.props.reviewComment}</td>
<td>{this.props.reviewRating}</td>
</tr>
);
}
}
});
任何见解都将不胜感激
之所以会发生这种情况,是因为这个是而不是引用映射函数中的组件。
要修复它,必须将作为第二个参数传递它的上下文绑定到map函数。
var commentNodes = this.props.data.map(function(comment) {
return (
<Addcontenttotable onChange= {this.props.onChange} taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emp_comment} empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment} reviewRating={comment.review_rating} >
</Addcontenttotable>
);
},this);
如果您正在使用ES6,您可以使用胖箭头函数来保留上下文。
var commentNodes = this.props.data.map((comment) => {
return (
<Addcontenttotable onChange= {this.props.onChange} taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emp_comment} empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment} reviewRating={comment.review_rating} >
</Addcontenttotable>
);
});
jsfiddle与解决的问题
每当您遇到'this'错误时,您就有了第一个要查看的解决方案!
为类定义构造函数,如下所示:
var variable = React.createClass({
ctor: function(){
this = self;
},
func1: function(){
//your code
this.anything//error
self.anything//solved
},
func2: function(){
//your code
this.anything//error
self.anything//solved
},
func3: function(){
//your code
this.anything//error
self.anything//solved
}
});
一旦您启动了如上所述的ctor函数,您就可以将所有的"this"更改为"self!"!
将this
传递到映射函数this.props.data.map(function(comment) { }, this);
,或者定义var self = this
并在映射函数中使用self.props
。
var TablefortaskList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Addcontenttotable onChange= {this.props.onChange} taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emp_comment} empRating={comment.empRating} key={comment.id} reviewComment={comment.review_comment} reviewRating={comment.review_rating} >
</Addcontenttotable>
);
}, this);
return (
<tbody>{commentNodes}</tbody>
);
}
});
相关文章:
- webpack代码拆分了handlerbs文件——结果是文件很大
- 试图将onChange函数作为道具传递给GrandChlidren,结果是TypeError:这是未定义的
- 为什么_self结果是不同的价值观
- 为什么结果是全局名称,这是由“这个”引起的
- 斐波那契数列的结果是无穷大,然后是 NaN
- 如何处理'00'JSON中的结果是JS或Coldfusion
- jQuery-Uncaught TypeError:$不是函数
- ReactJS-这个状态中的数组在删除时被正确更新,但结果是't,直到以后的状态发生变化
- 为什么这个JavaScript代码的结果是“;未定义”;
- 基准测试js的结果是什么意思
- WordPress jQuery未捕获的TypeError:$不是函数
- 将函数从 obj 传递到数组中.然后添加数组,但结果是 NaN.为什么
- TypeError: $ 不是 AJAX 和 Wordpress 中的函数
- JS TypeError:不是一个函数
- 在Javascript中获得下一个12个月的结果是混乱的
- jQuery(window).load(function($) 仍然给出 Uncatch TypeError: $ 不是
- 结果是检查多个复选框值并更新表数据
- 为什么Javascript给出的结果是数字而不是真/假的表达式
- 使用 Lodash 合并数组,为什么结果是重复的数组值?,我的代码在哪里出错
- 不同的结果是减去这两个值