4

In our react-admin application, first we display a products list.

On each row we also display a TextField (to allow user input number of copies) and a 'Print' button.

The snippet as below:

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

with custom field PrintPanel as below:

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>
    );
  }
}

The problem is: when user click the 'Print' button, react-admin open the 'Edit' page instead and Button's onclick is not called.

My question is: how to fix this?

Trung
  • 1,012
  • 13
  • 26

1 Answers1

8

Try this: onClick={ (e) => { e.stopPropagation(); alert(1) } }

If it does not help, update the react-admin version, this error has already been fixed.

MaxAlex
  • 2,919
  • 1
  • 14
  • 14
  • How to implement onClick like this for a custom field, like under `SomeCustomField.defaultProps = { onclick : "??" }` ? – dylanh724 Apr 14 '21 at 15:04
  • I'm not sure I understand the question, right: SomeCustomField.defaultProps = { onclick : (e) => { e.stopPropagation(); alert(1) } } – MaxAlex Apr 15 '21 at 04:19
  • 1
    Your component should look something like this: const SomeCustomField = ({ source, record = {}, onclick, ...props }) => () – MaxAlex Apr 15 '21 at 04:20