web-dev-qa-db-fra.com

Comment obtenir React Données de la rangée de table onclick

Bonjour, j'essaie de configurer mon application réagissant telle que lorsque vous cliquez sur un bouton d'une ligne dans mon tableau de réact, les données de cette ligne sont transmises à un autre composant. Pour le moment, j'essaie simplement de consoler.Log les données correctes, mais je suis incertain de la manière de transmettre des données de lignes de table réactive en fonction du clic. Comment puis-je faire ceci? Merci

Mes données factices stockées dans l'état avec le bouton (Afficher la vue détaillée) que je souhaite déclencher les données qui passent onclick:

    columns: [
      {
        Header: "First Name",
        accessor: "fname"
      },
      {
        Header: "Last Name",
        accessor: "lname"
      },
      {
        Header: "Employee Group",
        accessor: "egroup"
      },
      {
        Header: "Date of Birth",
        accessor: "dob"
      },
      {
        Header: "",
        id: "id",
        Cell: ({ row }) => (
          <button onClick={e => this.handleShow()}>
            Detailed View
          </button>
        )
      },
    ],
    posts: [
      {
        fname: "gerald",
        lname: "nakhle",
        egroup: "faisbuk",
        dob: "8/10/1995"
      }
    ]

Mon appel à rendre la table:

<ReactTable columns={this.state.columns} data={this.state.posts}></ReactTable>

Ma fonction de manutention onclick mais je ne sais pas comment je peux accéder aux données de la ligne de la table, je suis après

handleShow(e) {
    console.log(e);
  }
reactjsonclickreact-propsreact-table
3
Tamjid

Vous devrez ajouter un gestionnaire ONCLICK pour la ligne

const onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            console.log('A Td Element was clicked!')
            console.log('it produced this event:', e)
            console.log('It was in this column:', column)
            console.log('It was in this row:', rowInfo)
            console.log('It was in this table instance:', instance)
        }
    }
}

<ReactTable columns={this.state.columns} data={this.state.posts} getTrProps={onRowClick}></ReactTable>

vérifiez ce post pour plus d'informations composant de réact de table onclick événement pour une colonne

3
Khalid

Pour React-Table V7:

Passer un accessoire de rappel onRowClicked à la composante de la table,

Dans votre composant de table, appelez le rappel:

...row.getRowProps({
         onClick: e => props.onRowClicked && props.onRowClicked(row, e),
})

Dans React-Tableau V7, tout l'opérateur de propagation sur l'élément HTML qui commence par get...Props sont accessoires getter , par exemple:

rangée.getrowprops (), cell.getcellprops (), colonne.GetheaderProps (), gettablebodyProps (), gettableProps (), etc. Vous pouvez transmettre plus d'attributs pour l'étendre. par exemple:

    ...cell.getCellProps({ 
        style: {color: 'red'},  
        onClick: ()=> {}   
    })
0
Harish Kulkarni