试图将onChange函数作为道具传递给GrandChlidren,结果是TypeError:这是未定义的

Trying to pass onChange function as props to GrandChlidren result into TypeError: this is undefined

本文关键字:TypeError 结果是 GrandChlidren 未定义 函数 onChange      更新时间:2023-09-26

我试图将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>
              );
        }
});