我创建了一个由js函数生成的数独，我尝试通过react来显示它，但是我不知道为什么这样做有效。
我尝试创建一个在输入中带有id和值，值的81个正方形，当我在其中输入数字时，将执行功能comprobar并将其背景设置为已读或白色（如果正确的话）。
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";
/*Se genera el diseño */
var fallo;
// Array que contendra las posiciones que se mostrarán
var array = new Array(9);
// Array de 9x9 que contiene la solucion. generada
for (var z = 0; z < 9; z++) {
array[z] = new Array(9);
}
function rellenarCuad(n, m) {
// Método que recibe el punto de comienzo del cuadrado
var x = n * 3;
var z = m * 3;
var arrN = [1, 2, 3, 4, 5, 6, 7, 8, 9];
/* En este método se procede a rellenar el cuadrado 3x3 cumpliendo que no se repita en el mismo, en la fila y en la columna */
for (var i = x; i < 3 + x; i++) {
for (var j = z; j < 3 + z; j++) {
var arrayaux = new Array(9);
for (var zn = 0; zn < 9; zn++) arrayaux[zn] = array[zn][j];
var pr = true;
var intentos = 0;
do {
do {
var nm = Math.floor(Math.random() * 9, 0);
} while (arrN[nm] == 0);
if (
array[i].indexOf(arrN[nm]) === -1 &&
arrayaux.indexOf(arrN[nm]) === -1
) {
array[i][j] = arrN[nm];
arrN[nm] = 0;
pr = false;
}
if (intentos > 50) {
// Si rebasa 50 intentos doy por hecho que no tiene solucion
fallo = true;
return;
}
intentos++;
} while (pr);
}
}
}
// Método que genera el sodoku. Es recursivo, si no se halla una solución se llama a si mismo hasta encontrarla
function generarSodoku() {
// Método que simplemente llamar a rellenarCuad por cada cuadrado 3x3, es decir, le llama 9 veces
for (var i = 0; i < 3; i++) {
for (var y = 0; y < 3; y++) {
rellenarCuad(y, i);
if (fallo) {
// Si el seguro se activa, regenera el array y se llama asi mismo para repetir el proceso.
fallo = false;
array = null;
array = new Array(9);
for (z = 0; z < 9; z++) array[z] = new Array(9);
generarSodoku();
return;
}
}
}
}
// Función que genera el numero de posiciones a ocultar según la eleción del usuario
function umbral() {
var nm = 80;
var arrayM = new Array(nm);
for (var l = 0; l < nm; l++) {
var alpha = true;
while (alpha) {
var num = Math.floor(Math.random() * 81) + 1;
if (arrayM.indexOf(num) !== -1) {
} else {
arrayM[l] = num;
alpha = false;
}
}
}
}
generarSodoku();
console.log(array);
var valoresVacios = [0];
function generarAleatorios() {
for (let i = 1; i < 5; i++) {
do {
var numAlea = Math.floor(Math.random() * 80);
} while (!valoresVacios.indexOf(valoresVacios[i]));
valoresVacios[i] = numAlea;
}
}
generarAleatorios();
function comprobar(value, i) {
if (valoresVacios.indexOf(i)) {
var valor = Math.floor(i / 9);
var segundo = (i / 9).toFixed(1);
segundo = (segundo - valor) * 10;
if (array[valor][segundo] !== value) {
document.getElementById(i).style.backgroundColor = "red";
} else {
document.getElementById(i).style.backgroundColor = "white";
}
}
}
function Square(props) {
return (
<input className="square" type="text" onkeypress={comprobar(this.value, this.id)} />
);
}
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(81),
};
}
comprobar(value, i) {
if (valoresVacios.indexOf(i)) {
var valor = Math.floor(i / 9);
var segundo = (i / 9).toFixed(1);
segundo = (segundo - valor) * 10;
if (array[valor][segundo] !== value) {
document.getElementById(i).style.backgroundColor = "red";
} else {
document.getElementById(i).style.backgroundColor = "white";
}
}
}
renderSquare(a, i) {
if (valoresVacios.indexOf(i)) {
return <Square value={0} id={i} onkeypress={() => this.comprobar(a, i)}/>;
} else {
return <Square value={a} id={i} disabled onkeypress={() => this.comprobar(a, i)}/>;
}
}
render() {
/*const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
}*/
return (
<div>
<div className="status">{}</div>
<div className="board-row">
{this.renderSquare(array[0][0], 0)}
{this.renderSquare(array[0][1], 1)}
{this.renderSquare(array[0][2], 2)}
{this.renderSquare(array[0][3], 3)}
{this.renderSquare(array[0][4], 4)}
{this.renderSquare(array[0][5], 5)}
{this.renderSquare(array[0][6], 6)}
{this.renderSquare(array[0][7], 7)}
{this.renderSquare(array[0][8], 8)}
</div>
<div className="board-row">
{this.renderSquare(array[1][0], 9)}
{this.renderSquare(array[1][1], 10)}
{this.renderSquare(array[1][2], 11)}
{this.renderSquare(array[1][3], 12)}
{this.renderSquare(array[1][4], 13)}
{this.renderSquare(array[1][5], 14)}
{this.renderSquare(array[1][6], 15)}
{this.renderSquare(array[1][7], 16)}
{this.renderSquare(array[1][8], 17)}
</div>
<div className="board-row">
{this.renderSquare(array[2][0], 18)}
{this.renderSquare(array[2][1], 19)}
{this.renderSquare(array[2][2], 20)}
{this.renderSquare(array[2][3], 21)}
{this.renderSquare(array[2][4], 22)}
{this.renderSquare(array[2][5], 23)}
{this.renderSquare(array[2][6], 24)}
{this.renderSquare(array[2][7], 25)}
{this.renderSquare(array[2][8], 26)}
</div>
<div className="board-row">
{this.renderSquare(array[3][0], 27)}
{this.renderSquare(array[3][1], 28)}
{this.renderSquare(array[3][2], 29)}
{this.renderSquare(array[3][3], 30)}
{this.renderSquare(array[3][4], 31)}
{this.renderSquare(array[3][5], 32)}
{this.renderSquare(array[3][6], 33)}
{this.renderSquare(array[3][7], 34)}
{this.renderSquare(array[3][8], 35)}
</div>
<div className="board-row">
{this.renderSquare(array[4][0], 36)}
{this.renderSquare(array[4][1], 37)}
{this.renderSquare(array[4][2], 38)}
{this.renderSquare(array[4][3], 39)}
{this.renderSquare(array[4][4], 40)}
{this.renderSquare(array[4][5], 41)}
{this.renderSquare(array[4][6], 42)}
{this.renderSquare(array[4][7], 43)}
{this.renderSquare(array[4][8], 44)}
</div>
<div className="board-row">
{this.renderSquare(array[5][0], 45)}
{this.renderSquare(array[5][1], 46)}
{this.renderSquare(array[5][2], 47)}
{this.renderSquare(array[5][3], 48)}
{this.renderSquare(array[5][4], 49)}
{this.renderSquare(array[5][5], 50)}
{this.renderSquare(array[5][6], 51)}
{this.renderSquare(array[5][7], 52)}
{this.renderSquare(array[5][8], 53)}
</div>
<div className="board-row">
{this.renderSquare(array[6][0], 54)}
{this.renderSquare(array[6][1], 55)}
{this.renderSquare(array[6][2], 56)}
{this.renderSquare(array[6][3], 57)}
{this.renderSquare(array[6][4], 58)}
{this.renderSquare(array[6][5], 59)}
{this.renderSquare(array[6][6], 60)}
{this.renderSquare(array[6][7], 61)}
{this.renderSquare(array[6][8], 62)}
</div>
<div className="board-row">
{this.renderSquare(array[7][0], 63)}
{this.renderSquare(array[7][1], 64)}
{this.renderSquare(array[7][2], 65)}
{this.renderSquare(array[7][3], 66)}
{this.renderSquare(array[7][4], 67)}
{this.renderSquare(array[7][5], 68)}
{this.renderSquare(array[7][6], 69)}
{this.renderSquare(array[7][7], 70)}
{this.renderSquare(array[7][8], 71)}
</div>
<div className="board-row">
{this.renderSquare(array[8][0], 72)}
{this.renderSquare(array[8][1], 73)}
{this.renderSquare(array[8][2], 74)}
{this.renderSquare(array[8][3], 75)}
{this.renderSquare(array[8][4], 76)}
{this.renderSquare(array[8][5], 77)}
{this.renderSquare(array[8][6], 78)}
{this.renderSquare(array[8][7], 79)}
{this.renderSquare(array[8][8], 80)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
答案 0 :(得分：1)
您好，您使用了错误的onKeyPress事件处理程序，它应该收到对该函数的引用，并且不能以这种方式执行该函数：
function Square(props) {
const handleKeyPress = (e) => {
comprobar(props.value, props.id)
}
return (
<input className="square" type="text" onkeypress={handleKeyPress} />
);
}
使用Square组件时，您也不需要传递onkeypress：
renderSquare(a, i) {
if (valoresVacios.indexOf(i)) {
return <Square value={0} id={i} />;
} else {
return <Square value={a} id={i} disabled />;
}
}
答案 1 :(得分：0)
我建议在状态内部创建一个数组。这个。
const filledArray1 = new Array(81).fill("1");
const filledArray2 = new Array(81).fill("white");
this.state = {
cellValues: filledArray1 ,
cellBackgroundColors:filledArray2
}
loadValues=()=>{
const newValues= [ 1,"" , 5 , "" , 6 , ....... ] ; // 81
this.setState( { cellValues : [...newValues ] })
}
componentDidMount(){
loadValues();
}
loadValues=()=>{
const newValues= [ 1,"" , 5 , "" , 6 , ....... ] ; // 81
this.setState( { cellValues : [...newValues ] })
}
componentDidMount(){
loadValues();
}