我有以下代码:
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);
它是什么?它是一个自定义芯片组件,继承了材料ui的芯片。
但我还没有弄清楚为什么当我点击它时它会发送REST请求。
这样一个请求的例子:http://localhost:3000/#/users/{"name"3A"whatever_name"}
我有一个onClick道具覆盖,我试图覆盖它,但它什么都没做。
我在react admin的SingleFieldList中使用了这个组件,也许是react admin中的问题,但我使用了直接从material ui继承的自定义芯片组件。
代码来自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>
);
再一次-点击道具不起作用。
所以问题是:如何防止芯片组件发送REST请求,是否对其进行自定义
这对我有效:
<SingleFieldList linkType={false}>
<CustomChipField />
</SingleFieldList>