react-admin：处理 <Datagrid> 中自定义字段中的单击事件答案

【问题标题】：react-admin: Handle click event in Custom Field within a <Datagrid>react-admin：处理 <Datagrid> 中自定义字段中的单击事件
【发布时间】：2019-12-11 01:08:05
【问题描述】：

在我们的 react-admin 应用程序中，首先我们显示一个产品列表。

在每一行上，我们还显示一个 TextField（允许用户输入副本数）和一个“打印”按钮。

sn-p如下：

export const ProductList = props => (
  <List filters={<ProductFilter />} exporter={false} {...props} >
    <Datagrid rowClick="edit" >
      <TextField source="id" />
      <TextField source="productName" />
      <PrintPanel label="Print" />
    </Datagrid>
</List>
);

自定义字段PrintPanel如下：

import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

class PrintPanel extends React.Component {
  state = {
    copies: 1,
  }
  render() {
    return (
      <span>
        <TextField label="Number of copies"/>
        <Button variant="contained" color="primary"
          onClick={() => alert(1)}   // PROBLEM: this is NOT called when user click the button
        >
          Print
        </Button>
      </span>
    );
  }
}

问题是：当用户单击“打印”按钮时，react-admin 会打开“编辑”页面，而不会调用 Button 的 onclick。

我的问题是：如何解决这个问题？

【问题讨论】：

标签： react-admin

【解决方案1】：

试试这个：onClick={ (e) => { e.stopPropagation(); alert(1) } }

如果还是不行，更新react-admin版本，这个错误已经修复了。

【讨论】：

如何为自定义字段实现这样的onClick，比如SomeCustomField.defaultProps = { onclick : "??" }下？
我不确定我是否理解这个问题，对吧： SomeCustomField.defaultProps = { onclick : (e) => { e.stopPropagation();警报(1) } }
您的组件应该如下所示： const SomeCustomField = ({ source, record = {}, onclick, ...props }) => ()