J'essaie d'implémenter une table de réaction avec une seule ligne sélectionnable à la fois. J'ai parcouru de nombreux exemples pour la sélection de plusieurs lignes dans une table de réaction, mais dans mon cas, l'utilisateur ne peut sélectionner qu'une seule ligne lorsque l'utilisateur clique sur le bouton radio, mais actuellement toutes les lignes peuvent être sélectionnées. Quelqu'un pourrait-il m'aider à le mettre en œuvre?
3 Réponses :
Il s'agit d'une implémentation de réaction simple du comportement "de type radio" avec useReducer pour montrer comment utiliser la gestion des états avec des données de table. -lang = "js" data-hide = "false" data-console = "true" data-babel = "true">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script> <div id="root"></div>
const { useReducer } = React; // --> for inline use
// import React, { useReducer } from 'react'; // --> for real project
const reducer = (state, action) => {
return { checkedId: action.id }
}
const App = () => {
const [state, dispatch] = useReducer(reducer, {})
const CheckBox = ({id}) => (
<input
id={id}
onClick={() => dispatch({ id })}
checked={state.checkedId === id}
type="checkbox"
/>
)
return (
<table border="1">
<tr><td><CheckBox id="1" /></td><td>John</td></tr>
<tr><td><CheckBox id="2" /></td><td>Doe</td></tr>
</table>
)
};
ReactDOM.render(<App />, document.getElementById('root'))
À l'aide de react-table 7.5.0, j'ai créé une CodeSandbox avec une table de réaction qui ne rend fonctionnellement qu'une seule ligne sélectionnable à la fois.
En substance, j'ai remplacé une case à cocher rendue inconditionnellement:
Cell: ({ row }) => {
if (
rows.filter((row) => row.isSelected).length < 1 ||
row.isSelected
) {
return (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
);
} else {
return (
<div>
<IndeterminateCheckbox
checked={false}
readOnly
style={row.getToggleRowSelectedProps().style}
/>
</div>
);
}
}
par une case à cocher rendue conditionnellement:
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
)
J'ai filtré tous les objets de ligne pour vérifier les lignes sélectionnées, puis j'ai rendu conditionnellement une case à cocher de table de réaction fonctionnant normalement si le nombre de lignes sélectionnées est inférieur à 1 ou si le la ligne est déjà sélectionnée.
Si le nombre de lignes cochées est d'au moins un et que la ligne n'est pas sélectionnée, j'affiche une case à cocher en lecture seule qui ne peut pas être sélectionnée.
Idéalement, j'aurais aimé utiliser les selectedRowIds intégrés de react-table au lieu de filtrer tous les objets de ligne, mais je ne savais pas comment implémenter useTable () d'une manière qui me permette de y faire référence car il en est dérivé.
Voici react -table's Code de sélection de ligneSandbox que j'ai bifurqué. Voici la page pertinente dans leur documentation .
Je déplacerai le code dans un extrait de code intégré ultérieurement.
Vous pouvez également remplacer la méthode onChange sur la fonction prop Cell (...).
https://react-table.tanstack.com/docs/api/useRowSelect#row-properties
getToggleRowSelectedProps: Function(props) => props Use this function to get the props needed for a select row checkbox. Props: onChange: Function() style.cursor: 'pointer' checked: Bool title: 'Toggle Row Selected'
Je donnerai un bac à sable plus tard quand j'aurai le temps supplémentaire.
Est-ce nécessairement un problème de table de réaction? J'utiliserais simplement une gestion d'état au niveau des composants ou globale pour cela en utilisant des identifiants d'élément.
@gazdagergo Je dois utiliser la table de réaction pour afficher la case à cocher, activer la sélection de la case à cocher lorsque vous cliquez sur le bouton radio, vous devez donc effectuer ces opérations sur la table de réaction, pourriez-vous élaborer sur vos suggestions? Je suis un peu coincé à ce stade.
Je ne suis pas un grand fan de la table de réaction pour être honnête. Vous pouvez configurer des tableaux complexes très facilement, mais vous perdez tout ce temps dès que vous essayez d'ajouter une fonctionnalité personnalisée. C'était mon expérience.
@gazdagergo ouais je suis d'accord, mais toutes les autres fonctionnalités sont déjà intégrées à la table de réaction, seule celle-ci n'est pas encore terminée .. donc c'est devenu un problème sérieux pour l'instant .. donc essayer de trouver la solution