Reactテーブルの行データをOnclickで取得する方法

debugcn 投稿 Dev

タムジッド

こんにちは私は、react-tableの行アイテムのボタンをクリックすると、その行のデータが別のコンポーネントに渡されるように、reactアプリを設定しようとしています。現時点では、正しいデータを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);
  }

ハリド

行に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>

詳細については、この投稿を確認してください。列のreact-tableコンポーネントonClickイベント

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]