Как обработать нажатие на любую ячейку в таблице?

Question

[evg_96]

Есть таблица (поле) для игры в японский сканворд. Есть модель данных таблицы - двумерный массив. 0 - пустая ячейка, 1 не пустая. Изначально все заполнено нулями.
Как при нажатии на ячейку проверять ее значение, и если 0 то менять в state на 1, иначе на 0?

class Field extends React.Component {
  constructor() {
    super();

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

  handleTdClick(item) {
    // проверка и изменение значений в состоянии
   // к значению есть доступ, а вот как получить доступ к самой ячейки, чтобы изменить ей класс, не понятно
  }

  render() {
    const { rows } = this.props;

    return (
      <table className="field">
        <tbody>
          {
            rows.map((row, index) => (
              <tr key = { index }>
                {
                  row.map((item, index) => (
                    item !== 0
                    ? <td
                        onClick = { this.handleTdClick.bind(this, item) }
                        key = { index }
                        className="not-empty">
                      </td>
                    : <td
                        onClick = { this.handleTdClick.bind(this, item)  }
                        key = { index }
                        className="empty">
                      </td>
                  ))
                }
              </tr>
            ))
          }
        </tbody>
      </table>
    );
  }
}

Comments

[Виталий]

Подобных примеров же миллион, ну скачай исходники чьи-нибудь...

[evg_96]

Виталий какие исходники??

[Alexander Litvinenko]

evg_96, например https://github.com/adazzle/react-data-grid

Answer 1

[Алексей Уколов]

как получить доступ к самой ячейке, чтобы изменить ей класс

Никак не надо получать, все классы вы должны навешивать в render() на основе данных, в этом вся суть Реакта. В обработчике вы изменяете state, автоматически вызывается render(), в DOM выгружается новое состояние. Вы работаете с данными, React работает с DOM.

Comments

[Алексей Уколов]

Вам нужно передавать в обработчик индексы строки и ячейки и значение ячейки, сейчас у вас всё в кучу.

Answer 2

[0xD34F]

handleTdClick(item) {

Интересно, а как вы собираетесь определять, какой именно элемент следует изменить, если item - число?

Вместо значения нужны его индексы:

{this.state.rows.map((row, rowIndex) => (
  <tr>
    {row.map((item, colIndex) => (
      <td
        onClick={this.onTdClick}
        data-row={rowIndex}
        data-col={colIndex}
        className={item ? 'not-empty' : 'empty'}
      >
        {item}
      </td>
    ))}
  </tr>
))}

onTdClick = ({ target: { dataset: d } }) => {
  const row = +d.row;
  const col = +d.col;

  this.setState(({ rows }) => ({
    rows: rows.map((n, i) =>
      i === row
        ? n.map((m, j) => j === col ? +!m : m)
        : n
    )
  }));
}

Answer 3

[Dmitry Alekseev]

Если я тебя правильно понял, то
onClick={(e) => this.handleTdClick(e, item)}

Comments

[Алексей Уколов]

Событие и в текущем коде автора приходит в handleTdClick, только последним аргументом, а не первым.

Answer 4

[Ninja Mate]

import createReactClass from 'create-react-class'
const Td = createReactClass({
  render () {
    return (
                   <td
                        onClick = { this.props.handleTdClick(item, e) }
                        key = { this.props.index }
                        className={this.props.item.state ===1 "empty" ? "not-empty" :}>
                   </td>
...
<Td {...props} />

Comments

[Ninja Mate]

Добавь shouldComponentUpdate https://reactjs.org/docs/react-component.html#shou...