如何在React Admin中实现仅通过点击EditButton触发Post编辑及解决EditButton失效问题

To achieve your goal of only allowing edits via the EditButton (and not the entire row) while keeping the button functional, follow these two straightforward steps:

1. Remove the rowClick prop from the Datagrid #

The rowClick="edit" prop on your Datagrid is what makes every part of the row trigger the edit form. Removing this prop will disable row-level edit navigation, leaving only the dedicated EditButton to handle that action.

Here's your updated PostList component:

export const PostList = () => (
  <List>
    <Datagrid> {/* Removed rowClick="edit" */}
      <TextField source="id" />
      <ReferenceField source="userId" reference="users">
        <TextField source="name" />
      </ReferenceField>
      <TextField source="title" />
      <EditButton />
    </Datagrid>
  </List>
);

2. Keep the edit prop in your Posts Resource #

The EditButton relies on the edit configuration in your Resource component to generate the valid edit page route. When you comment out edit={PostEdit}, React Admin doesn't create that route—so the button has nowhere to navigate to, which is why it stops working.

You need to retain this prop to ensure the button functions as expected:

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} edit={PostEdit} />
    <Resource name="users" list={UserList} />
  </Admin>
);

Quick breakdown of why this works: #

• Without rowClick="edit", Datagrid rows no longer have an onClick handler that opens the edit form.
• The EditButton is a purpose-built component that uses the edit route (created by edit={PostEdit}) to navigate to the edit form when clicked.

If you want to restrict direct access to the edit page (e.g., via URL), you can add access control using React Admin's authProvider or wrap the PostEdit component in a protected route—but that's an optional extra step beyond your core requirement.

内容的提问来源于stack exchange，提问作者i like Cola