React Js：只更改已单击的table单元格的class

Question

我正在创建一个寻路应用程序。我希望用户能够在 A 点到 B 点之间绘制自己的墙。我只需要更改每个 table 单击的单元格的 class 。但是我只能更改每个 table 单元格的 class，无论单击哪个 table 单元格。我完全不知道该去哪里。理想情况下，用户将能够单击并拖过网格，而不必单击每个独立的 table 单元格。干杯:)

Grid.js

import React, { Component } from "react";

import Xnode from "./Xnode";
import Ynode from "./Ynode";

export class Grid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      path: true,
      wall: false,
      Xactive: this.state,
      Yactive: this.state,
    };
  }
  
  render() {
    let rows = [];
    let columns = [];

    for (let i = 0; i < 60; i++) {
      columns[i] = (
        <td
          className={this.state.wall ? "wall" : "grid"}
          onClick={() => this.setState({ wall: true })}
          id={i}
          key={i}
        ></td>
      );
    }

    for (let i = 0; i < 25; i++) {
      rows[i] = (
        <tr id={i.toString()} key={i.toString()}>
          {columns}
        </tr>
      );
    }

    return (
      <div>
        <table className="grid">
          <tbody>{rows}</tbody>
        </table>
      </div>
    );
  }
}

export default Grid;

App.js


import './App.css';

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';

import './App.css';

import Grid from './components/Grid';

export default () => (
  <Router>
    <div >
        <Route exact path="/" component={Grid} />
</div>
  </Router>
  
);

CSS

 table.grid {
  margin: 80px auto;
  border: 5px solid #333;
  border-collapse: collapse; /* */
}

td.grid {
  width: 15px; height: 15px;
  border: 1.5px solid #333; /* */
}

td.wall {
  width: 15px; height: 15px;
  background-color: black;
  border: 1.5px solid #333; /* */
}

.node-x {
  background-color: mediumaquamarine ;
  border: 2px solid black;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.node-y {
  background-color: red ;
  border: 2px solid black;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

Answer 1

因此，table 个单元格的每个 class 都取决于网格的状态，当单击任何 table 个单元格时，网格的状态会发生变化。在我看来 td 元素应该是它们自己的组件并且也有它们自己的状态。类似于：

class MyTD extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    }
  }

  render(){
    <td 
      onClick={() => {this.props.handleClick(); this.setState({isClicked: true});}}
      className={this.state.isClicked ? "wall" : "grid"}
    </td>
  }
}

然后在您的网格组件中：

//for loop
<MyTD key={i} handleClick={() => this.setState({wall: true})}/>

这是假设您需要您的子组件来更改父网格的状态。如果他们不这样做，并且点击只需要改变自己的状态，你甚至不需要传递点击处理程序。

React Js：只更改已单击的table单元格的class

React Js: Only change the class of the table cell that has been clicked

javascript

css

interactive

path-finding

reactjs