0

есть цикл, который формирует таблицу в React, необходимо по onClick вывести в консоль значения каждой итерации данного цикла, простыми словами - адрес ячейки, по которой кликнули мышкой. Сейчас в консоль выводится общее значение итераций. я понимаю, что для этого надо создать отдельный компонент, куда передать значение аргументов, но как это сделать - придумать не могу

  class Table extends Component{
  constructor (){
  super();
  this.cellClick = this.cellClick.bind(this);
  }
  cellClick () {
    console.log (i,j)
  }
  render(){
    var trs= new Array();
    for (var i = 0; i <= this.props.rows; i++) {
      var tds = new Array();
      for (var j = 0; j <= this.props.columns; j++) {
        tds.push (<td columns = {i} rows = {j} onClick = {this.cellClick}> 
        {i} x {j} </td>)
       }
      trs.push(<tr>{tds}</tr>)
     }
    return (
        <table>
          {trs}
        </table>
     )
    }
   }

1 ответ 1

2

Вариант 1. Быстрый, но считается антипаттерном:

cellClick = (i, j) => {
    console.log (i,j)
};
....
tds.push (
    <td columns = {i} rows = {j} onClick = {this.cellClick.bind(this, i, j)}> 
        {i} x {j} 
    </td>
)

Вариант 2. Сделать для td отдельный компонент:

class MyTd extends React.Component {
    onClick = () => {
        this.props.onClick(this.props.columns, this.props.rows);
    };

    render() {
        return <td onClick = {this.onClick}> 
            {this.props.children}
        </td>
    }
}

class Table extends Component{
  cellClick = (i, j) => {
    console.log (i,j)
  };

  render(){
    ....    
        tds.push (<MyTd columns = {i} rows = {j} onClick = {this.cellClick}> 
        {i} x {j} </MyTd>)
       }
    ....
   }
}
7
  • тот же результат получается: на какую бы ячейку я не кликнула, в консоли просто срабатывает счетчик кликов и i и j не меняются. 21 авг 2018 в 18:45
  • какой из вариантов пробовали? 21 авг 2018 в 18:46
  • для обоих вариантов уберите из конструктора this.cellClick = this.cellClick.bind(this); 21 авг 2018 в 18:48
  • и 1й, и 2й. Результат одинаковый - счетчик кликов. 21 авг 2018 в 18:52
  • да, так работает. Объясните, почему если объявляем this.cellClick = this.cellClick.bind(this, i, j) и при этом onClick = {this.cellClick} не работает, а если брать сокращенную запись onClick = {this.cellClick.bind(this, i, j), тогда работает. и еще вопрос по вар№2 - вы использовали {this.props.children} - т.к это дочерний компонент? 21 авг 2018 в 18:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.