Question

我正在映射材质UI芯片，但我没有在它们上面显示交叉按钮，我也无法点击它们或使用onTouchTap事件。

这是映射

  {mapping.map(chipMap => {
          return (
            <div>
              <Chip
                key={chipMap._id}
                onRequestDelete={this.handleRequestDelete(chipMap)
                )}
                onTouchTap={this.handleTouchTap(chipMap)}
                style={styles.chip}
              >
                <Avatar src={chipMap.picture} />
                {chipMap.name}
              </Chip>
            </div>
          );
        })};

如果我使用this.handleTouchTap(chipMap).bind(this)，那么它会在控制台中提供未定义的内容。

 handleRequestDelete = chipMap => {
    alert(chipMap.name);
  };

  handleTouchTap = chipMap => {
        alert(chipMap.name);
  };

我绝对肯定问题出在这个绑定上，但我无法弄明白。

我也做了这个

 this.handleRequestDelete = this.handleRequestDelete.bind(this);

在构造函数中，但无济于事。

芯片会显示精确的头像图片和名称，但关闭按钮不会显示，我无法点击每个芯片甚至提醒其名称，ID或图片

Answer 1

你绑定方法的方式不正确，你想传递一个额外的参数，所以这样写：

public function showAction(Request $request, $id)

根据MDN DOC：

onRequestDelete={this.handleRequestDelete.bind(this,chipMap)}

handleRequestDelete(chipMap){
   console.log(chipMap);
}

onTouchTap={this.handleTouchTap.bind(this, chipMap)}

handleTouchTap(chipMap){
   console.log(chipMap);
}

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

首先传递thisArg：

调用绑定函数时作为this参数传递给目标函数的值。

然后传递所有参数，arg1，arg2，...：

在调用目标函数时，前缀为提供给绑定函数的参数的参数。

材质UI芯片交叉按钮/删除按钮不起作用

1 个答案: