React（Next.js）提交表单后无法清空输入框的问题求助

你现在用jQuery直接修改DOM的方式行不通，因为你的输入框是React受控组件——它的值完全由state.name控制，直接操作DOM不会同步到React的状态里，所以输入框看起来没变化。

正确处理方式 #

要清空输入框，直接更新React状态就行，这是React处理受控组件的标准逻辑：

修改handleSubmit函数 #

删掉没用的$("#name").val("")，换成更新state的代码，建议放在请求成功的回调里（如果需要不管请求成败都清空，就把重置代码移到回调外）：

const handleSubmit = (e) => {
  e.preventDefault();
  const data = {
    name: state.name,
    email: state.job
  };
  
  axios.post('https://xxxxxxxxxxx/', data)
    .then(function(response) {
      console.log(response.data);
      // 请求成功后重置表单状态
      setState({
        ...state,
        name: "",
        job: ""
      });
    })
    .catch(err => {
      console.error('请求失败:', err);
      // 可选：不管成败都清空的话，取消下面注释
      // setState({ name: "", job: "" });
    });
};

完整组件示例 #

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

export default function RemindForm() {
  const [state, setState] = useState({
    name: "",
    job: ""
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = { name: state.name, email: state.job };
    
    axios.post('https://xxxxxxxxxxx/', data)
      .then(res => {
        console.log(res.data);
        setState({ name: "", job: "" }); // 清空输入框
      })
      .catch(err => console.error(err));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        id="name"
        placeholder="Type your email here"
        value={state.name}
        onChange={handleChange}
      />
      <button type="submit" className='btn-remindme'>Remind me</button>
    </form>
  );
}

核心要点 #

• 受控组件的状态完全由React管理，别用jQuery这类直接操作DOM的工具修改值，必须通过setState更新状态。
• 可以根据业务需求选择在请求成功后清空，或者不管请求结果都清空，调整代码位置即可。

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