ReactJS + MaterialUI: как распознать, что флажок TableRow/› был нажат?

Используя ReactJS + MaterialUI's '' (http://www.material-ui.com/#/components/table), я создал таблицу с двумя строками, каждая с флажком. После того, как флажок установлен, как я могу получить метод для распознавания события строки, а также информацию для этой конкретной строки?

Вот код:

import React, { Component } from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

class TableExample extends Component {
  <Table>
    <TableHeader>
      <TableRow>
        <TableHeaderColumn>Row Count</TableHeaderColumn>
        <TableHeaderColumn>Name</TableHeaderColumn>
        <TableHeaderColumn>Color</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
        <TableRowColumn>John Smith</TableRowColumn>
        <TableRowColumn>White</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>2</TableRowColumn>
        <TableRowColumn>Randal White</TableRowColumn>
        <TableRowColumn>Green</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>3</TableRowColumn>
        <TableRowColumn>Stephanie Sanders</TableRowColumn>
        <TableRowColumn>Black</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
);

export default TableExample

reactjs javascript material-ui react-jsx
person Community    schedule 09.09.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Для этого существует реквизит события onRowSelection в компоненте Table. Пожалуйста, проверьте документ, который вы связали.

person mschayna    schedule 09.09.2016
comment
Извините, я пробовал, но не получилось. Не могли бы вы показать пример, чтобы я мог принять ответ и проголосовать за него? Кроме того, как строка распознает информацию для этой конкретной строки (например, 1, Джон Смит, белый)? - person ; 09.09.2016
comment
Просто проверяю, видели ли вы мой последний комментарий. Пожалуйста, дай мне знать. - person ; 10.09.2016

arrow_upward
0
arrow_downward

Как упомянул пользователь mschayna, вы можете использовать onRowSelection реквизит события на Table

Пример

<Table
  onRowSelection={ this.handleRowSelection }
>
...
</Table>

И в вашей функции handleRowSelection вы получите массив, содержащий все строки, которые выбрал пользователь.

handleRowSelection( selectedRows ) {
  // selectedRows contains all the rows that have been selected by the user.
  // If all rows have been selected then selectedRows will be a string and its value will be 'all'

  if ( selectedRows === "all" ) {
    // all the rows in the table has been selected by the user
    // add your logic here.

  } else {
    // selectedRows is an array
    // iterate over it.
    selectedRows.map( (row) => {
      // here you can access specific rows details.
      console.log('row', row);
      // your logic here.
    });

  }

}

Однако вы также можете сделать это так

<Table>
  <TableHeader>
    ...
  </TableHeader>
  <TableBody>
    <TableRow onClick={ () => { handleRowClick(1, 'John Smith', 'White') } }>
      <TableRowColumn>1</TableRowColumn>
      <TableRowColumn>John Smith</TableRowColumn>
      <TableRowColumn>White</TableRowColumn>
    </TableRow>
    ...

А в функцию handleRowClick можно добавить логику

handleRowClick( id, name, color ) {
  // this will be called when a user clicks on the row.
  console.log(`Users id is ${id} and name is ${name} and color is ${color}`);
}

После того, как флажок установлен, как я могу получить метод для распознавания события строки, а также информацию для этой конкретной строки?

Вы можете добавить этот код при вводе флажка, но помните, что вы должны проверить его, установлен он или нет.

onChange={ (event) => { handleRowClick(1, 'John Smith', 'White', event) } }

Обратите внимание, что функции передается новый параметр event. Теперь вы можете получить доступ к данным события и посмотреть, установлен флажок или нет.

Поэкспериментируйте с этим кодом, внесите необходимые изменения и используйте наиболее удобный для вас метод.

person Dhruv Kumar Jha    schedule 12.09.2016