ReactJS：提交与变更时获取表单输入值的问题

嘿，作为React新手碰到这类基础问题太正常啦，我来帮你一步步搞定！你的代码里主要是对React函数组件的事件处理和受控组件概念没摸透，咱们一个个解决：

先说说你遇到的问题根源 #

• 输入无法修改：你给input的value硬写死成了'the value'，而且没通过React状态来控制这个值，属于「受控组件」但没绑定状态，所以输入框根本不会响应你的修改。
• onChange事件写法错误：你写的onChange={console.log(this.value)}会在组件刚渲染的时候就执行一次console.log，而不是输入变化时触发。而且函数组件里根本没有this，得通过事件对象来拿输入值。
• onSubmit事件写法错误：同样，onSubmit={onNameChange(this.value)}会在渲染时直接调用函数，而且没有阻止表单默认的刷新行为，就算能触发也会立刻刷新页面看不到结果。

修正后的完整代码 #

import React, { useState } from "react";

const App = () => {
  // 用useState管理输入值，初始值设为你原来的'the value'
  const [inputValue, setInputValue] = useState('the value');

  // 处理输入变更的函数
  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setInputValue(newValue); // 更新状态，让输入框能跟着变化
    console.log("输入变更:", newValue); // 打印当前输入值
  };

  // 处理表单提交的函数
  const handleFormSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认刷新行为
    console.log("表单提交:", inputValue); // 打印提交时的输入值
  };

  return (
    <>
      <form onSubmit={handleFormSubmit}>
        {/* 把value绑定到状态，onChange绑定处理函数 */}
        <input 
          value={inputValue} 
          type="text" 
          onChange={handleInputChange}
        />
        {/* 加个提交按钮，不然没法触发submit事件哦 */}
        <button type="submit">提交</button>
      </form>
    </>
  );
}

export default App

关键知识点解释 #

• useState钩子：用来在函数组件里管理状态，inputValue是当前的输入值，setInputValue是更新这个值的函数，只有调用它更新状态，React才会重新渲染组件，让输入框显示新值。
• 事件处理函数：不管是onChange还是onSubmit，都要传递一个函数引用，而不是直接执行函数（比如不能写onChange={handleInputChange()}，这会立刻执行）。通过事件对象e可以获取到输入框的e.target.value。
• 阻止默认行为：表单提交默认会刷新页面，所以在handleFormSubmit里必须调用e.preventDefault()，这样才能看到console里的打印结果。

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