在我们的 react-admin 应用程序中,首先我们显示一个产品列表。
在每一行上,我们还显示一个文本字段(允许用户输入份数(和一个"打印"按钮。
代码片段如下:
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 会打开"编辑"页面,并且不会调用按钮的 onclick。
我的问题是:如何解决这个问题?
试试这个:onClick={ (e) => { e.stopPropagation(); alert(1) } }
如果它没有帮助,请更新反应管理员版本,此错误已经修复。