Material UI Chip 十字按钮/删除按钮不起作用

Question

我正在映射 Material 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)，那么它会在控制台中给出 undefined。

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

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

我确定问题出在 this 绑定上，但我无法完全弄清楚。

我也是这样做的

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

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

芯片确实会与准确的头像图片和名称一起显示，但没有显示关闭按钮，我无法点击每个芯片来提醒其名称、ID 或图片

Answer 1

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

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

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

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

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

根据MDN DOC：

syntax: fun.bind(thisArg[, arg1[, arg2[, ...]]])

bind() 方法创建一个新函数，在调用该函数时，该函数具有 此关键字设置为提供的值，具有给定的序列 调用新函数时提供的任何参数之前的参数。

先传thisArg：

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

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

在调用目标函数时添加到提供给绑定函数的参数前面的参数。