React中如何用state控制div高度？输入更新但div高度无变化

你的代码存在两个关键问题，导致div高度无法随state更新：

1. 内联样式写法错误：你写的style={{height: {val}}}里val是未定义变量，而且React内联样式设置尺寸必须带单位（比如px），否则浏览器无法识别。
2. input值类型异常：type="number"的input在onChange事件中返回的e.target.value是字符串类型，直接用于样式会导致无效。

修复后的完整代码 #

import { useState } from "react"
import './App.css'

function App() {
  
  const [height, setHeight] = useState(0)

  const handleInput = e => {
    // 将字符串转为数字，保证state存储数值类型
    setHeight(Number(e.target.value))
  }

  return (
    <div className="App">
      <h1>Sheet Cutter</h1>
      <input type="number" placeholder="Height" onChange={handleInput} value={height}/>
      {/* 拼接px单位，让浏览器能识别有效高度值 */}
      <div className="sheet" style={{height: `${height}px`}}></div>
    </div>
  )
}

export default App

关键修改说明 #

• 在handleInput中用Number()把input的字符串值转为数字，避免后续样式或计算时出现类型错误。
• 内联样式里通过模板字符串把height变量和px拼接成合法的CSS尺寸值，确保浏览器能正确解析高度。

如果需要支持em、%等其他单位，可以让用户输入单位，或者在代码中固定单位，只要保证最终样式值是符合CSS规范的字符串即可。

内容的提问来源于stack exchange，提问作者Faisal