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 不會有副作用/突變。