Блог

Использование Material-UI <Table/> (http://www.material-ui.com/#/components/table) с помощью ReactJS у меня есть таблица, настроенная с флажком select all. Каждый раз, когда по отдельности устанавливается флажок для строки, полученный идентификатор строки добавляется в массив состояний clickedRowIds . Итак console.log() , выводится массив с идентификаторами выбранных строк.

Например, если бы я снял флажки только для первой строки и второй, в журнале консоли было бы напечатано: ____THESE ARE THE CLICKED ROWS____ [1, 2] (Где 1 и 2 представляют идентификационные номера строк в целых числах). Но когда я нажимаю на флажок Select All в заголовке, он снимает все флажки в таблице, хотя в console.log() он просто отображается ____THESE ARE THE CLICKED ROWS____ all и ids.forEach() выдает ошибку Uncaught TypeError: ids.forEach is not a function .

Все флажки строк устанавливаются с помощью флажка Select All, но почему не все идентификационные номера строк добавляются в clickedRowIds массив? Используя ids.forEach() , я хотел бы записать в консоль все выбранные строки, используя кнопку Выбрать все.

 export default class TestTable extends Component {
  constructor(props) {
    super(props)

    this.state = {
      clickedRowIds: [],
    }

    this.handleRowSelection = this.handleRowSelection.bind(this);
  }

  handleRowSelection(rowIds) {
    this.setState({
      clickedRowIds: rowIds
    })
  }

  render(){
    const ids = this.state.clickedRowIds
    console.log('____THESE ARE THE CLICKED ROWS____ ', ids)

    ids.forEach(id => {console.log(id)})

    return(

      <div className='table_body' style={styles.content}>
        <Table
          multiSelectable={true}
          onRowSelection={this.handleRowSelection}
        >
          <TableHeader
            displaySelectAll={true}
            enableSelectAll={true}
          >
              ...
          </TableHeader>
        </Table>
      </div>
    )
  }
}
  

За ответ проголосуют и на него ответят.

Проверьте документы здесь: http://www.material-ui.com/#/components/table

Вызывается при выборе строки. selectedRows — это массив всех выбранных строк. ЕСЛИ были выбраны все строки, вместо этого будет возвращена строка «all», указывающая на то, что были выбраны все строки.

Это означает, что если выбраны все строки, к сожалению, ваши идентификаторы строк будут установлены не в массив, а в строку с надписью «all». Вам понадобится некоторая логика для обработки этого случая, прежде чем вызывать forEach для идентификаторов строк. Ваша ошибка связана с тем, что для строки «all» не доступен forEach метод.