React中使用变量作为HTML元素值 变量变更时视图未更新问题

问题原因 #

1. 你在函数组件内声明的X是普通JS变量，不属于React的响应式状态，React不会监听这类变量的变更，就算你修改了X的值，也不会触发组件重新渲染，<p>标签展示的始终是组件第一次渲染时拿到的X初始值。
2. 你的输入回调函数handleChangeInputField里，只是把输入值赋值给了未声明的临时变量valueOfInputField，从头到尾都没有修改过X的值，自然不会触发任何更新。

解决方案 #

用React内置的useState Hook来声明响应式状态X，修改状态时调用对应的更新方法触发组件重渲染即可，修正后的代码如下：

import './App.css';
import Input from '@material-ui/core/Input'
import { useState } from 'react'

function App() {
  // 声明响应式状态X，setX为更新状态的方法
  const [X, setX] = useState('My text 1');

  const handleChangeInputField = (event) => {
    const valueOfInputField = event.target.value
    console.log(valueOfInputField)
    // 调用更新方法修改状态，触发组件重渲染
    setX(valueOfInputField)
  }

  return (
    <div className="App">
      {/* 绑定value属性让Input变成受控组件，保证视图和状态完全对齐 */}
      <Input value={X} onChange={ handleChangeInputField } />
      <p>{ X }</p>
    </div>
  );
}

export default App;

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