import React from "react"
export default function Components() {
const PI = 3.14
const [value, setValue] = React.useState("")
const [inputvalue, setInputvalue] = React.useState(0)
function calculation() {
const originalvalue = PI * inputvalue * inputvalue
setValue(`${originalvalue} cm^2`)
console.log(value)
}
function getInput (event) {
setInputvalue(event.target.value)
}
console.log("main")
return (
<div className="output">
<h4>Enter the r of the circle below in cm</h4>
<input onChange={getInput} type="number" name="input"/>
<button onClick = {calculation}> Show Area</button>
<p>Area of the circle is : {value}</p>
</div>
)
}
因此，每當我輸入一個數字時，我的組件都會重新呈現（我用控制臺日志檢查過它），但我的輸出值是一個狀態值（圓圈的面積是：{value}）仍然保留在頁面上。相反，當組件重新渲染時，需要再次將其分配為“”。但它沒有發生，我的代碼運行良好。我只是想了解這怎么可能
uj5u.com熱心網友回復：
您getInput正在更新inputvalue，而不是value。
要讓您的輸入元素的 onChange 處理程式更新 UI 內容，getInput需要更像：
function getInput (event) {
setValue(event.target.value)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/370069.html
標籤：javascript 反应 功能 成分 状态