React Material-UI“Chip”组件的“x”（删除）按钮不起作用答案

【问题标题】：React Material-UI "Chip" component's 'x' (delete) button not workingReact Material-UI“Chip”组件的“x”（删除）按钮不起作用
【发布时间】：2017-06-15 01:11:54
【问题描述】：

我无法像示例中那样让“Chip”控件兑现“X”按钮：http://www.material-ui.com/#/components/chip

添加“onRequestDelete”属性确实会添加“X”按钮，但单击它不会执行任何操作。实际上，似乎悬停在“X”按钮上本身并不会触发其悬停效果（即整个芯片具有悬停效果，而按钮本身应该具有悬停效果-看起来不像按钮的悬停效果曾经发生过）。这就像我无法获得按钮的焦点。

注意：如果我点击芯片并按下“删除”键，“ > IN DELETE”会被提醒。我注意到类似的行为，因为我也在尝试使用 material-ui-chip-input，“Backspace”可以删除芯片，但我永远不能使用“X”按钮。

基本示例：

import React from 'react';
import Chip from 'material-ui/Chip';

class MyChip extends React.Component {
    constructor(props) {
        super(props);

        this.delete = this.delete.bind(this);
    }

    delete(e) {
        alert(" > IN DELETE"); // Does not fire on button click (except when I hit "Delete" key, see above explanation)
    }

    render() {
        return <Chip key={0} onRequestDelete={this.delete}>testy</Chip>;
    }
}

相关的package.json依赖：

"material-ui": "^0.16.7",
"material-ui-chip-input": "^0.12.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-tap-event-plugin": "^2.0.1",

【问题讨论】：

刚刚测试了您的代码，它工作正常。您确定问题出在Chip 上吗？您粘贴了“基本示例” - 您能否粘贴您正在测试的完整代码？
对我来说，该代码不会调用删除函数。我写了“基本示例”，因为这是我问题的最基本版本。

标签： javascript reactjs material-ui

【解决方案1】：

删除功能似乎不存在。请尝试在Chip点击事件上绑定：

return <Chip key={0} onRequestDelete={this.delete.bind(this)}>testy</Chip>;

【讨论】：

对不起！我在提交之前在线编辑了代码，但实际上我的方法确实存在。我在我的问题中解决了这个问题。请重新阅读。我已经在我的实际代码中检查了两次和三次，一切都是犹太洁食。我只是在提交问题时搞砸了。

【解决方案2】：

我遇到了同样的问题。对我来说，解决方法是添加对“react-tap-event-plugin”的缺失依赖。

你可以在http://www.material-ui.com/#/get-started/installation找到官方文档

相关部分是：

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

您的 package.json 依赖项中似乎有插件，但请确保您正在导入和初始化它。

【讨论】：

【解决方案3】：

在 Chip 上指定 deleteIcon 属性。
将 mdi-material-ui 模块中的 CloseIcon 放入 deleteIcon 属性中。
将 onClick 函数添加到 CloseIcon。

通过这种方式，它可以在移动设备和桌面设备上运行。对我来说，onRequestDelete 在移动设备上不起作用但我想新版本的 material-ui 可以解决这个问题。

<Chip deleteIcon={<CloseIcon onClick={this.delete} />}>

【讨论】：

【解决方案4】：

我在我的一个项目中遇到了同样的问题。问题是我们将pointer-events: none 样式应用于全局重置样式表中的所有svg。删除它为我解决了这个问题。

【讨论】：

【解决方案5】：

确保您传递的是函数而不是调用它：

onDelete={() => handleDelete()}

【讨论】：

【解决方案6】：

在我的情况下，这有帮助（显然 onClick 功能是问题所在）：

    <RawChipInput
      ... other Props
      chipRenderer={(
        {
          value,
          isFocused,
          isDisabled,
          isReadOnly,
          handleClick,
          handleDelete,
          className,
        },
        key
      ) => (
        <Chip
          key={key}
          className={className}
          onDelete={handleDelete}
       //   onClick={handleClick}
          label={value}
        />
      )}
    />

【讨论】：