阻止 Chip 组件发送 REST 请求答案

【问题标题】：Prevent Chip component to send a REST request阻止 Chip 组件发送 REST 请求
【发布时间】：2020-09-25 15:24:56
【问题描述】：

我有以下代码：

import React from 'react';
import PropTypes from 'prop-types';
import Chip from '@material-ui/core/Chip';
import withStyles from '@material-ui/core/styles/withStyles';

const styles = {
  root: {
    margin: 4,
  },
};

function CustomChipField({ root, classes, record, onClick }) {
  return (
    <Chip className={classes.root} label={`${record.name}`} onClick={onClick} />
  );
}

CustomChipField.propTypes = {
  classes: PropTypes.shape({}).isRequired,
  record: PropTypes.shape({}),
  onClick: PropTypes.func.isRequired,
};

CustomChipField.defaultProps = {
  record: {},
};

export default withStyles(styles)(CustomChipField);

这是什么？是继承material-ui芯片的自定义Chip组件。

但我还没有弄清楚为什么当我点击它时它会发送 REST 请求。
此类请求的示例：http://localhost:3000/#/users/{"name"3A"whatever_name"}

我有一个 onClick 属性被覆盖，我试图覆盖它，但它没有做任何事情。

我在react-admin的SingleFieldList中使用了这个组件，可能是react-admin的问题，但是我使用的是直接继承自material-ui的自定义Chip组件。

来自 react-admin 的代码：

export const UserList = props => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="username" />
      <ArrayField source="some_array">
        <SingleFieldList>
          <CustomChipField
            source="name"
            size="small"
            clickable={true}
            onClick={handleClick}
          />
        </SingleFieldList>
      </ArrayField>
    </Datagrid>
  </List>
);

再一次 - onClick 道具不起作用。

所以问题是：如何防止Chip组件发送REST-request，是否自定义。

【问题讨论】：

似乎在 UserList 中您将 onClick 道具传递给 CustomChipField。我想请求是在那里完成的？
没有。这是我试图覆盖它的尝试。它不起作用。我将从代码中删除它以防止混淆。
@szczocik 编辑了它，现在我在问题中提到了 onClick，它什么也没做。

标签： reactjs material-ui react-admin

【解决方案1】：

这对我有用：

<SingleFieldList linkType={false}>
   <CustomChipField />
</SingleFieldList>

【讨论】：

这确实是一个答案。大约两到三周前发现了这个，但忘记添加答案。谢谢。