input onChange 正在清除 React 中 DOM 中的所有元素。 输入表单与按钮配合使用效果很好，但似乎无法在第一次加载时使用 onChange

Question

所以我正在创建一个网格，您可以使用应用程序上的两个输入字段来调整它的大小。 我有跨单元格的输入，向下的单元格输入和设置网格的按钮，效果很好。 我想更改以便输入更新存储在 cellsAcross 和 cellsDown 上的 state。 当我删除按钮并将 onChange 属性添加到输入元素时，如果我不刷新浏览器它会起作用，但是一旦第一次呈现所有内容，添加输入时 DOM 中的所有内容都会消失。

这是带有按钮的代码：

 function App() { const [cellsAcross, setCellsAcross] = useState(5); const [cellsDown, setCellsDown] = useState(5); const getGridSize = () => { const inputAcross = document.getElementById("cells-across").value; const cellsAcross = parseInt(inputAcross); setCellsAcross(cellsAcross); const inputDown = document.getElementById("cells-down").value; const cellsDown = parseInt(inputDown); setCellsDown(cellsDown); console.log(`Across: ${cellsAcross} | Down: ${cellsDown}`); }; return ( <div className="app"> <Header /> <CellGrid numberOfColumns={cellsAcross} numberOfRows={cellsDown} /> <label htmlFor="cells-across">Across</label> <input type="number" id="cells-across" name="cells-across" min="1" /> <br /> <label htmlFor="boxes-down">Down (1-20):</label> <input type="number" id="cells-down" name="cells-down" min="1" /> <br /> <button onClick={getGridSize}>Make Grid</button> <br /> </div> ); } export default App;

这就是我想要的：

 import React, { useState } from "react"; import CellGrid from "./CellGrid"; import "./App.css"; import Header from "./Header"; function App() { const [cellsAcross, setCellsAcross] = useState(5); const [cellsDown, setCellsDown] = useState(5); const getGridSize = () => { const inputAcross = document.getElementById("cells-across").value; const cellsAcross = parseInt(inputAcross); setCellsAcross(cellsAcross); const inputDown = document.getElementById("cells-down").value; const cellsDown = parseInt(inputDown); setCellsDown(cellsDown); console.log(`Across: ${cellsAcross} | Down: ${cellsDown}`); }; return ( <div className="app"> <Header /> <CellGrid numberOfColumns={cellsAcross} numberOfRows={cellsDown} /> <label htmlFor="cells-across">Across</label> <input type="number" id="cells-across" name="cells-across" min="1" onChange={getGridSize} /> <br /> <label htmlFor="boxes-down">Down (1-20):</label> <input type="number" id="cells-down" name="cells-down" min="1" onChange={getGridSize} /> </div> ); } export default App;

Answer 1

更新onChange={()=>{setCellsAcross(e.target.valeu)}}以将 state 值设置为新值。 这将导致整个组件重新渲染。

相关 - 直接从 DOM 中提取值是不好的做法。 如果您真的想在代码的其他地方获取该输入的值，您可以添加一个 const myCellsAcrossRef=useRef() and then add a ref attribute to the element: ref={myCellsAcrossRef}`。

最后，如果您只是设置横向和向下值 onChange，则不需要 getGridSize() 方法，但如果您这样做了……您将其命名为“setGridSize() 或 updateGridSize()”以指示该方法改变了事物. “获取”意味着 function 不会有副作用/突变。