J'ai un projet d'administrateur de réaction et j'ai implémenté un bouton personnalisé pour la vue Liste passé dans l'attribut bulkActionButtons comme décrit dans la documentation ici: https://marmelab.com/react-admin/List.html#bulk-action-buttons
const MakeAdminButton = withStyles(styles)(class MakeAdminButton extends React.Component {
handleAction = () => {
//does the stuff as required using this.props.selectedIds
//what to return to unset this.props.selectedIds
};
render () {
return <Button variant="contained"
color="primary"
onClick={this.handleAction}
<AdminIcon/>
</Button>;
}
});
Le MakeAdminButton gère le clic et effectue la mise à jour dont j'ai besoin. La pièce manquante du puzzle est de savoir comment désélectionner les éléments de la liste une fois l'action terminée. Le props.selectedIds est protégé, donc je ne peux pas simplement définir ceci sur un tableau vide après avoir terminé ma logique.
La question est de savoir comment désinstaller props.selectedIds code> ou une autre méthode pour désélectionner les éléments de la liste à la fin.
const BulkUserActions = props => (
<MakeAdminButton {...props}/>
);
const UserList = props => (
<List {...props} bulkActionButtons={<BulkUserActions/>}>
<Datagrid rowClick="show">
<TextField source="id"/>
<EmailField source="email"/>
</Datagrid>
</List>
);
3 Réponses :
Configurez des métadonnées pour chaque fois que vous cliquez sur la case à cocher, afin qu'elle injecte vrai ou faux dans le tableau comme:
listData = {
...
isChecked : true
}
Ensuite, à l'intérieur de la fonction qui gère les opérations en bloc, ajoutez un [listData] .filter () , (le filtre lodash est plus rapide), pour vérifier et voir lequel isChecked === true , puis définissez-les sur false et mettez à jour le Attribut value = {bool} sur la balise d'entrée de case à cocher.
Merci Joe mais dans react admin, je ne suis pas responsable de la configuration du tableau vérifié, cela est géré par ce composant marmelab.com/admin-on-rest/List.html#the-list-component . L'action personnalisée reçoit un tableau de selectedIds mais n'a pas accès pour les annuler
Non, je regarde dans l'API pour les List.bulkActionButtons de react-admin. Je l'ai compris, nécessite d'appeler une fonction d'assistance crudUpdateMany pour effectuer une mise à jour. Cela déclenche le changement dans le magasin redux et annule la prop
Désolé, j'aurais aimé avoir aidé ... Je lui ai donné au moins un essai à l'université.
J'apprécie l'aide - plus que ce que j'ai obtenu des gars de react-admin
Content que vous ayez compris, faites attention et je garderai un œil sur vous ici.
Quelqu'un a-t-il réussi à désactiver la propriété sans appeler crudUpdateMany?
La solution est d'appeler une fonction d'assistance en masse depuis react admin:
class MakeAdminButton extends React.Component {
handleAction = () => {
const { basePath, crudUpdateMany, resource, selectedIds } = this.props;
//custom code goes in here...
//calling this function triggers the unset and closes the toolbar
crudUpdateMany(resource, selectedIds, { isAdmin: true }, basePath);
};
render () {
return <Button label="Make Admin" onClick={this.handleAction}>
<AdminIcon/>
</Button>;
}
};
const BulkUserActions = connect(undefined, { crudUpdateMany })(MakeAdminButton);
const UserList = props => (
<List {...props} bulkActionButtons={<BulkUserActions/>}>
<Datagrid>
<TextField source="id"/>
<EmailField source="email"/>
<BooleanField source="isAdmin" label="Admin" />
</Datagrid>
</List>
);
Un exemple est montré sur cette page si j'avais pris la peine de la lire correctement: https://github.com/ marmelab / react-admin / blob / master / docs / List.md # boutons-d'action en bloc
L'administrateur de React fournit des moyens de le faire. Sur v3 directement avec useUnselectAll ou sur le rappel onSuccess des hooks useMutation, useUpdateMany et useDataProvider. Sur la v2 avec dataProvider, quatrième argument du décorateur withDataProvider ou en définissant meta.onSuccess.unselectAll sur true des actions redux personnalisées, ou automatiquement avec crudUpdateMany, ou les options prop du composant Mutation.
Pour la v2 avec crudUpdateMany, goto code > Réponse de Mike Miller.
Exemples de travail:
https://codesandbox.io/s/exciting-firefly-dd1ni?file=/src/App.js
v3:
const MakeAdminMutationV2 = props => (
<Mutation
type="updateMany" //{UPDATE_MANY}
resource={props.resource}
payload={{ ids: props.selectedIds, data: { isAdmin: true } }}
options={{
onSuccess: {
unselectAll: true,
refresh: true
}
}}
>
{approve => <Button onClick={approve}>Make admin with Mutation</Button>}
</Mutation>
);
https://marmelab.com/react-admin/doc/3.5/Actions.html#handling-side-effects-in-usedataprovider
useUpdateMany / useDataProvider / useMutation hooks, onSuccess callback appelant unselectAll () depuis useUnselectAll()
import { connect } from 'react-redux';
const MAKE_ADMIN = "MAKE_ADMIN";
const makeAdmin = ids => ({
type: MAKE_ADMIN,
payload: { ids, data: { isAdmin: true } },
meta: {
fetch: UPDATE_MANY,
resource: "users",
onSuccess: { unselectAll: true, refresh: true }
}
});
const MakeAdminButtonWithCustomAction = connect(
null,
{ makeAdmin }
)(
class extends React.Component {
handleClick = () => {
this.props.makeAdmin(this.props.selectedIds);
};
render() {
return (
<Button onClick={this.handleClick}>
Make Admin With Custom Redux Action
</Button>
);
}
}
);
https://marmelab.com/react-admin/doc/3.5/Actions.html#usemutation-hook
https://marmelab.com/react-admin/doc/3.5/Actions.html#usedataprovider-hook a >
https: // marmelab. com / react-admin / doc / 3.5 / Actions.html # spécialisé-hooks
Les exemples V2 fonctionnent également sur la v3, mais Mutation et withDataProvider sont hérités, avec un petit changement lors de l'utilisation directe de dataProvider , depuis la modification de l'api dataProvider sur la v3.
v2:
withDataProvider:
const UnmakeAdminButtonWithWithDataProvider = withDataProvider(
class extends React.Component {
handleClick = () => {
this.props.dataProvider(
UPDATE_MANY,
"users",
{ ids: this.props.selectedIds, data: { isAdmin: false } },
{ onSuccess: { unselectAll: true, refresh: true } }
);
};
render() {
return (
<Button onClick={this.handleClick}>
Unmake Admin with withDataProvider
</Button>
);
}
}
);
https://marmelab.com/react-admin/doc/2.9/Actions.html#handling-side-effects
action redux personnalisée:
const MakeAdminButtonV3 = props => {
const refresh = useRefresh();
const unselectAll = useUnselectAll();
const [makeAdmin, { loading }] = useUpdateMany(
props.resource,
props.selectedIds,
{ isAdmin: true },
{
onSuccess: () => {
unselectAll(props.resource);
refresh();
}
}
);
//OR
const dataProvider = useDataProvider();
const makeAdmin2 = () => {
dataProvider.updateMany(
props.resource,
{ ids: props.selectedIds, data: { isAdmin: true } },
{
onSuccess: () => {
unselectAll(props.resource);
refresh();
}
}
);
};
//OR
const [makeAdmin3, { loading3 }] = useMutation(
{
type: "updateMany",
resource: props.resource,
payload: { ids: props.selectedIds, data: { isAdmin: true } }
},
{
onSuccess: () => {
unselectAll(props.resource);
refresh();
}
}
);
return (
<Button onClick={makeAdmin3} disabled={loading3}>
Make Admin with V3 dataProvider hooks
</Button>
);
};
https://marmelab.com/react-admin/doc/2.9/Actions.html#adding-side-effects-to- actions
Composant de mutation:
const UnselectAllButtonV3Hook = props => {
const unselectAll = useUnselectAll();
return (
<Button
onClick={() => {
unselectAll(props.resource);
}}
>
Unselect all with v3 hook
</Button>
);
};
https://marmelab.com/react-admin/doc/2.9/Actions.html#query-and-mutation-components a >