从 React 子组件返回值

Question

我是 React 的初学者，所以如果这是一个基本问题，我深表歉意。我正在尝试使用 ReactJS 构建一个在线数独网格，但我无法呈现该字段中的数字。我已经制作了两个组件，一个是 Sudoku.js，它呈现完整的数独块，另一个是 Node.js，它由一个包含在 div 中的输入字段组成。我想要的功能是在用户键入数字时更改输入字段的默认值（在我的情况下为“”）。我尝试了以下方法。它会更新我的 grid 变量的值，但不会在 Node 的输入字段中显示更新后的值。请帮忙。

数独.js

const sudokugrid = (
    <div>
        {grid.map((row,rowIdx) => {
            return (
                <div key = {rowIdx} className="rowWrapper">
                    {row.map((col,colIdx) => {
                        var element = grid[rowIdx][colIdx].value;
                        
                        const change = (event) => {
                            element = event.target.value;
                            grid[rowIdx][colIdx].value = element;
                                                      
                            setGrid(grid);
                            return element;
                        }

                        return (
                            <Node
                                key = {colIdx}
                                onChangeValue = {change}
                                value = {element}
                            />
                        )
                    })}
                </div>
            )
        })}
    </div>
);

这里的 grid 是一个 9x9 元素的二维数组，所有元素的初始值为 "" ，当用户在相应字段中输入值时应该更新这些元素。问题是当用户输入数字但数字未显示在输入字段中时，值会更新

Node组件如下：

function Node(props){
return (
    <div className="box">
        <input 
            className = "num" 
            type="number" 
            value = {props.value}
            onChange = {props.onChangeValue}
        />
    </div>
)

}

Answer 1

这是因为 react 无法检测到突变。请参阅此article。您必须将数独网格存储在状态值中并使用回调函数更改状态。 一个example。 我建议使用对象映射来存储状态，因为您可以更轻松地管理值。