阻止 Chip 组件发送 REST 请求

Question

我有以下代码：

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的芯片的自定义芯片组件。

但是我还没有弄清楚为什么当我点击它时它会发送 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，是否自定义。

Answer 1

这对我有用：

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

阻止 Chip 组件发送 REST 请求

Prevent Chip component to send a REST request

reactjs

material-ui

react-admin