使用reactjs中的用户输入创建可点击的正方形网格

Question

我正在尝试创建一个reactjs脚本，用户在其中输入网格大小（即n），并创建一个nxn网格，用户可以单击该网格并更新API。 我在Google上搜索了几天，发现了井字游戏的示例（其中的大多数都无法满足我的需求，即创建了一个固定的3x3网格），并使用了材质用户界面（但这似乎也适用于固定数据网格）。 我该如何解决这个问题？ 提前致谢， 桑德拉 到目前为止我尝试过的... App.js如下：

import React, {Component} from 'react';
import {Square} from './square';
//import { grid } from '../data/grid.js';
let sideLength;

export default class App extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = { 
          dim: sideLength,
          grid: Array(sideLength).fill(null).map(x=>Array(sideLength).fill("+")),
          squares: [].fill(null),
          pokemon: 'X',
          description: '',
          sideLength: 9,
          impassables: [],
          startingLoc: '',
          endingLoc: '',
          isPassable : 'True'
          }
          this.onChange = this.onChange.bind(this);
          this.onSubmit = this.onSubmit.bind(this);
          this.handleClick = this.handleClick.bind(this);
          this.handleChange = this.handleChange.bind(this);
          this.handleOnClick = this.handleOnClick.bind(this);
          this.compoundDidMount = this.compoundDidMount.bind(this);
    }

    handleClick(i){
      const squares = this.state.squares.slice();
      squares[i] = true;
      this.setState({
        squares: squares,
        isPassable: !this.state.isPassable
      })

    }
    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }
    handleChange(e) {
      //this.setState({sideLength: e.target.value});
      //this.onChange(e.target.value);
      fetch('https://frozen-reef-96768.herokuapp.com/find-path', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              //description: this.state.description,
              //sideLength: this.state.sideLength,
              sideLength: 3,
              impassables:[
                {
                  x: 1,
                  y: 0
                },
                {
                  x: 1,
                  y: 1
                }
              ],
              startingLoc: {
                x: 0,
                y: 0
              },
              endingLoc: {
                x: 2,
                y: 2
              },
              })
        });

    }
    compoundDidMount(){
      sideLength = this.state.sideLength;
      fetch('https://frozen-reef-96768.herokuapp.com/find-path', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              description: this.state.description,
              sideLength: this.state.sideLength,
              impassables:[
                {
                  x: 1,
                  y: 0
                },
                {
                  x: 1,
                  y: 1
                }
              ],
              startingLoc: {
                x: 0,
                y: 0
              },
              endingLoc: {
                x: 2,
                y: 2
              },
              })
      }).then(results => {
        return results.json();
        })
    }

    handleOnClick(x, y){
    const g = this.state.grid
    if (this.state.isPassable){
      if (g[x][y] === '+'){
        g[x][y] = this.state.pokemon;
        this.setState({'grid':g});
        this.state.pokemon = this.state.pokemon === 'X';
    } else {
      alert('Please select an empty square!');
      }
    }
  }
    onSubmit(e) {
        e.preventDefault();
        this.setState({sideLength: e.target.value});
        var sideLength = this.sideLength;
        //console.log(sideLength);
        document.write(this.state.sideLength)
        fetch('https://frozen-reef-96768.herokuapp.com/find-path', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              description: this.state.description,
              sideLength: this.state.sideLength,
              impassables:[
                {
                  x: 1,
                  y: 0
                },
                {
                  x: 1,
                  y: 1
                }
              ],
              startingLoc: {
                x: 0,
                y: 0
              },
              endingLoc: {
                x: 2,
                y: 2
              },
              })
        }).then(results => {
        return results.json();
        })
        document.write('End');
    }
        //var meh = document.getElementByName('sideLength')
   // document.write('End');
    render() {
      const rows = this.state.grid.map((r,i) => {return(
        <tr key={"row_"+i}>
        {r.map((d,j) => {console.log('building'); return(
          <Square 
            key={i+"__"+j}
            dims={this.dims}
            onClick={()=>{this.handleOnClick(i,j)}}
            contents={d==="+"?" ":d} />
        )})}
        </tr>
      )
      });
        return (
            <div className="App">            
                <form
                    id="main-login"
                    /** action={this.props.action}
                    method={this.props.method} */
                    method = 'GET'
                    onSubmit={this.onSubmit.bind(this)}>
                    <h2>Pokepaths</h2>
                    <label>
                        <span class="text">Enter the grid size:</span><br/>
                        <input type="text" className="form-control" ref={(c) => this.sideLength = c} name="sideLength" />
                    </label>
                    <br/>
                    <div class="align-right">
                        <button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>
                    </div>
                </form>

              <div style={{textAlign:"center"}}>
              <h1> PokePaths! </h1>
              <table cellSpacing="0" id="table" style={{align: "center"}}>
                <tbody>
                  {rows}
                </tbody>
              </table>
              <br />
              <button style={{margin:"auto"}} onClick={this.handleChange.bind(this)}>Path</button>
              </div>
            </div>
        )
    }

}

square.js如下：

import React from 'react';

export class Square extends React.Component{
  render(){
    const color_ = this.props.color;
    return (
      <td
        style={{
          overflow:'hidden',
          width:'auto',
          height:'25px',
          backgroundColor:'#e4e4a1',
          color:'red',
          boarderColor: 'black',
          border:".5px solid black"
        }}
      onClick={this.props.handleClick} >
        <div
          style={{color:color_,
                  border:"1px solid",
                  backgroundColor: color_,
                  borderRadius: "50%",
                  borderColor: color_,
                  height:25}} >
        </div>
      </td>
    )
  }
}