Question

我无法得到＆＃34;芯片＆＃34;控制以纪念＆＃34; X＆＃34;像示例中的按钮：http://www.material-ui.com/#/components/chip

添加＆＃34; onRequestDelete＆＃34;属性确实添加＆＃34; X＆＃34;按钮，但点击它什么都不做。事实上，它似乎并没有徘徊在＆＃34; X＆＃34;按钮本身会触发其悬停效果（即整个芯片具有悬停效果，并且按钮本身应该具有悬停效果 - 它似乎不会发生按钮的悬停效果）。这就像我无法获得按钮的焦点。

注意：如果我点击芯片然后按＆＃34;删除＆＃34;关键，＆＃34; ＆GT; IN DELETE＆＃34;警报。我已经注意到了类似的行为，因为我也在尝试使用材料-ui-chip-input，＆＃34; Backspace＆＃34;努力删除芯片，但我永远不能使用＆＃34; X＆＃34;按钮（一个或多个）。

基本示例：

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>;
    }
}

相关部分是：

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

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

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

Answer 2

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

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

Answer 3

我在一个项目中遇到了同样的问题。问题是我们在全局重置样式表中将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form-database-settings"> <label for="database_section">Database Settings</label> <form id="database_section" class="form-settings"> </form> </div>样式应用于所有pointer-events: none。删除此错误对我来说就是一个问题。

Answer 4

在芯片上指定 deleteIcon 道具。
将 CloseIcon 从 mdi-material-ui 模块放入deleteIcon属性。
向 CloseIcon 添加 onClick 功能。

通过这种方式，它可以在移动设备和台式机上运行。对我来说，简单的onRequestDelete在移动设备上不起作用但是我猜较新版本的material-ui可以解决此问题。

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

Answer 5

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

onDelete={() => handleDelete()}

Answer 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}
        />
      )}
    />

React Material-UI＆＃34; Chip＆＃34;组件＆＃39; x＆＃39; （删除）按钮不起作用

6 个答案: