Как получить данные строки таблицы React Onclick

Привет, я пытаюсь настроить свое приложение для реагирования так, чтобы при нажатии кнопки в элементе строки в моей таблице реагирования данные в этой строке передавались в другой компонент. На данный момент я просто пытаюсь указать в console.log правильные данные, но не уверен, как передать данные строки в таблице реакции на основе щелчка. Как я могу это сделать? Спасибо

Мои фиктивные данные хранятся в состоянии вместе с кнопкой (Показать подробное представление), которую я хочу инициировать при передаче данных 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"
      }
    ]

Мой призыв к визуализации таблицы:

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

Моя функция обработчика onclick, но я не уверен, как я могу получить доступ к данным строки таблицы, которые мне нужны

handleShow(e) {
    console.log(e);
  }

reactjs react-props onclick react-table
person Tamjid    schedule 11.05.2019    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Вам нужно будет добавить обработчик onClick для строки

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>

проверьте этот пост для получения дополнительной информации компонент таблицы реакции onClick для столбца < / а>

person Khalid    schedule 11.05.2019

arrow_upward
2
arrow_downward

Для React-table v7:

Передайте опору обратного вызова onRowClicked компоненту таблицы,

В компоненте таблицы вызовите обратный вызов:

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

В таблице реакции v7 все операторы распространения в элементе HTML, который начинается с get...Props, имеют вид props getter, например:

row.getRowProps (), cell.getCellProps (), column.getHeaderProps (), getTableBodyProps (), getTableProps () и т. д. Вы можете передать любые другие атрибуты, чтобы расширить его. Например:

    ...cell.getCellProps({ 
        style: {color: 'red'},  
        onClick: ()=> {}   
    })
person Harish Kulkarni    schedule 01.02.2021
comment
это очень полезно, поскольку я напрямую добавлял onClick в тег td, а не передавал onClick в качестве опоры функции row.getRowProps, которая вызывала нежелательное поведение в таблице. - person newbie; 01.05.2021

arrow_upward
0
arrow_downward

В определении вашей таблицы:

export function TableCustom({handleShow}) {
    const columns = React.useMemo(() => [{
        Header: 'Action',
        accessor: 'action',
        Cell: props => <button className="btn1" onClick={() => handleShow(props)}>Details</button>,
    },]

    return <ReactTable>;
});

И в родительском компоненте: просмотрите данные выбранной строки:

const handleShow = (cell) => {
    console.log(cell?.row?.original);
}
person pushStack    schedule 12.02.2021

arrow_upward
-5
arrow_downward

Также убедитесь, что вы привязываете свою функцию в конструкторе, или используйте следующий синтаксис:

handleShow = (e) => {
    console.log(e);
  }
person oevillegas    schedule 26.02.2020