@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>
    );
  }
}
  • Вопрос задан
  • 335 просмотров
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
как получить доступ к самой ячейке, чтобы изменить ей класс
Никак не надо получать, все классы вы должны навешивать в render() на основе данных, в этом вся суть Реакта. В обработчике вы изменяете state, автоматически вызывается render(), в DOM выгружается новое состояние. Вы работаете с данными, React работает с DOM.
Ответ написан
0xD34F
@0xD34F Куратор тега React
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
    )
  }));
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Zatmil
@Zatmil
Fullstack-разработчик
Если я тебя правильно понял, то
onClick={(e) => this.handleTdClick(e, item)}
Ответ написан
victorzadorozhnyy
@victorzadorozhnyy
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} />
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы