React useState hook 第二个输入框onChange触发状态不更新问题

代码存在两处编写错误，直接导致第二个输入框状态无法更新：

• 核心错误：第二个<input>的onChange属性被错误添加了单引号，属性值变成了字符串'{handleChange2}'，而非函数引用。JSX语法中，绑定JavaScript逻辑（事件函数、状态值等）需要直接用{}包裹表达式，外层加引号后React会把内容识别为普通字符串，不会绑定对应的事件处理函数，输入时自然不会触发setName2更新状态。第一个正常工作的输入框写法onChange={handleChange}才是符合规范的。
• 规范错误：两个输入框、两个label都使用了重复的id="name"，HTML要求页面内id全局唯一，重复id会导致label点击聚焦失效、辅助设备识别异常，第二个输入框需要使用独立id。

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
  <script type="text/babel">
    function Greeting () {
      const [name, setName] = React.useState('')
      const [name2, setName2] = React.useState('')
      const handleChange = event => setName(event.target.value)
      const handleChange2 = event => setName2(event.target.value)
      return (
        <div>
          <form>
            <label htmlFor='name'>Name: </label>
            <input onChange={handleChange} id='name' />
          </form>
          {name ? <strong>Hello {name}</strong> : 'Please type your name'}
          <div>
            <form>
              <label htmlFor='name2'>Name: </label>
              <input onChange={handleChange2} id='name2' />
            </form>
            {name2 ? <strong>Hello {name2}</strong> : 'Please type your name'}
          </div>
        </div>
      )
    }

    ReactDOM.render(<Greeting />, document.getElementById('root'))
  </script>
</body>

• 所有需要在JSX中执行的JavaScript表达式（变量、函数、运算逻辑等）都必须放在{}中，不要给{}外层加引号，否则会被解析为静态字符串。
• 事件绑定属性（如onChange、onClick）接收的必须是函数引用，不要在绑定位置直接加括号执行函数（高阶函数返回值场景除外），否则组件渲染时就会提前触发函数。
• 表单元素建议显式绑定value属性对应状态，把输入框变为受控组件，避免状态和输入值不同步的问题。

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