React Js:只更改已单击的表单元格的类

Question

我正在创建一个寻路应用程序。我希望用户能够在点A到B之间绘制自己的墙。我只需要更改单击的每个表单元格的类。然而，我只能更改每个表单元格的类，无论单击了哪个表单元格。我完全不知道该去哪里。理想情况下，用户可以在网格上单击和拖动，而不必单击每个诱导表单元格。干杯：(

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

因此，每个表单元格的类都取决于网格的状态，当单击任何表单元格时，网格的状态都会发生变化。在我看来，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})}/>

这是假设您需要子组件来更改父栅格的状态。如果它们没有，并且单击只需要更改自己的状态，那么您甚至不需要传递单击处理程序。