React/Next.js提交表单后文本框无法输入，如何解决？

核心问题 #

你的输入框绑定了value={state.name}，但注释掉了onChange事件处理函数——React里受控组件必须通过onChange同步更新状态，否则输入框会被状态“锁定”，根本没法输入内容。另外初始状态是空对象，state.name一开始是undefined，绑定到输入框也会引发异常。

修复步骤 #

1. 写handleChange函数，同步输入内容到state：

const handleChange = (e) => {
  const { name, value } = e.target;
  setState(prevState => ({
    ...prevState,
    [name]: value
  }));
};

2. 初始化state时给name设空字符串：

const [state, setState] = useState({ name: "" });

3. 取消onChange的注释，绑定到输入框：

<input
  type="text"
  name="name"
  id="name"
  placeholder="Enter Your Email"
  value={state.name}
  onChange={handleChange} // 取消注释
  className="input-group"
/>

4. 优化提交后的状态更新（可选）：
   用函数式更新拿最新状态，避免闭包问题：

setState(prevState => ({
  ...prevState,
  name: ""
}));

5. 换掉jQuery的DOM操作（推荐）：
   用React状态管理提示框显示，比如加个showMsg状态：

const [showMsg, setShowMsg] = useState(false);

// 提交成功后
setShowMsg(true);
setTimeout(() => setShowMsg(false), 5000);

// JSX里替换jQuery的部分
{showMsg && <div id="msg4" style={{ display: showMsg ? 'block' : 'none' }}>邮箱已存在</div>}

完整修复后的代码示例 #

import { useState } from 'react';
import axios from 'axios';

const SubscribeForm = () => {
  const [state, setState] = useState({ name: "" });
  const [showMsg, setShowMsg] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setState(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      name: state.name
      // 其他字段如果需要，也要同步处理
      // country: state.country,
      // msgs: state.msgs
    };

    axios
      .post("xxxxxxxxxxxxxxxxxxxxxxxx", data)
      .then(function (response) {
        if (response.data.msg == "exist") {
          setShowMsg(true);
          setTimeout(() => setShowMsg(false), 5000);
          
          setState(prevState => ({
            ...prevState,
            name: ""
          }));
        } else {
          // 处理其他情况
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  return (
    <>
      <form className="row" id="home_contact_form" onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          id="name"
          placeholder="Enter Your Email"
          value={state.name}
          onChange={handleChange}
          className="input-group"
        />
        <input type="submit" value="send" className="sendbtn" id="sendbtn" />
      </form>
      {showMsg && (
        <div id="msg4" style={{ animation: 'fadeIn 0.5s, fadeOut 0.5s 4.5s forwards' }}>
          该邮箱已订阅过
        </div>
      )}
    </>
  );
};

export default SubscribeForm;

（注：动画效果可以用CSS写keyframes代替jQuery的show/fadeOut）

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