@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>
    );
  }
}
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
как получить доступ к самой ячейке, чтобы изменить ей класс
Никак не надо получать, все классы вы должны навешивать в render() на основе данных, в этом вся суть Реакта. В обработчике вы изменяете state, автоматически вызывается render(), в DOM выгружается новое состояние. Вы работаете с данными, React работает с DOM.
Ответ написан
Пригласить эксперта
Ответы на вопрос 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} />
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы