React使用hooks实现提交表单后在div内展示计算结果的方法

• 你当前的写法存在两个核心问题：
  1. 错误地将状态修改方法setResult放在了渲染位置，你需要先声明对应的状态变量，渲染时要使用状态值而非修改方法
  2. onChange是输入类元素的事件，绑定在普通div上不会生效，状态更新逻辑应该放在提交触发的handleSubmit函数中

修复步骤 #

1. 声明状态 #

首先用useState声明存储计算结果的状态：

import { useState } from 'react'

// 组件内部声明，初始值根据你的结果类型设置，数字类型可以设为0
const [result, setResult] = useState('')

2. 修改提交处理函数 #

在handleSubmit中完成状态更新：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(solution)
  setResult(solution) // 将计算得到的solution赋值给状态
}

3. 修改结果展示的div #

直接渲染状态值即可，无需绑定额外事件：

<div>
  result : {result}
</div>

点击提交按钮后会更新result状态，React监听到状态变化后会自动重新渲染对应div，展示最新的计算结果。

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