在ReactJS中对子组件的绑定发出警告

Warning on bind component on children in ReactJS

本文关键字：绑定 警告 组件 ReactJS      更新时间：2023-09-26

我在单元格内的控件上得到了几个警告。如果我点击一个单元格，就会发生一个事件。一些单元格有一个下拉菜单和一个事件，这取决于选择。我将一个值绑定到onClick事件，以便我可以在我的函数中获得一个值。

我在每一行上得到以下警告:

警告:bind(): React组件方法只能绑定到组件实例。

我的代码是这样的:

  items = this.state.currentValues.map(function(itemVal) {
      return (
          <tr>
            <td  onClick={this.rowClick.bind(this, itemVal.OrderId)}>{itemVal.Customer}</td>
            <td  onClick={this.rowClick.bind(this, itemVal.OrderId)}>{itemVal.OrderId}</td>
            <td>
              <div> Flag To Group </div>
              <div>
                <Menu label={itemVal.User}>
                  <List onSelect={this.assignResponsibleUser.bind(this, itemVal.User)}>
                  </List>
                </Menu>
              </div>
          </td>
          </tr>
        );
    }.bind(this)
    );
    return(
        <Table selectable={true} scrollable={true} small={true}>
            <tr>
                {tableHeader}
            </tr>
            <tbody>
                {items}
            </tbody>
        </Table>
    );

我试着替换:

onClick={this.rowClick.bind(this, itemVal.OrderId)}

: 

onClick={this.rowClick.bind(null, itemVal.OrderId)}

但是它给了我同样的警告。

我试着删除.bind(this)，但它给了我一个错误，因为它找不到rowClick函数。

如何解决这个问题?

不使用

this.array.map(function(){}.bind(this));
使用

this.array.map(function(){}, this);

是传递作用域的映射选项。

this。方法必须是一个函数，例如:

senddel:function(id){
      this.props.onCommentDel(id);//parent callback
    },
    render: function() {
        return ( < div className = "commentList" >
            {this.props.data.map(function(comment){
                return (
                    <Comment key={comment.id} author={comment.author} onCommentDel={this.senddel.bind(this,comment.id)}>
                    {comment.text}
                    </Comment>
                )
            },this)}
    < /div>
    );
}
相关文章：