React+Next.js输入框异常：无法输入与验证错误求助

核心问题分析 #

你的代码存在几个关键错误，直接导致输入框无法正常输入或验证异常：

• 输入框value绑定的state.name与输入框name="email"不匹配，状态更新后无法同步到输入框
• 状态更新时错误使用e.target.email作为字段名，应该用e.target.name匹配输入框的name属性
• 提交逻辑里错误引用了未定义的全局value变量，应该直接从组件状态state中取值
• 提交后的状态重置写法错误，没有正确更新对应字段

修正后的代码 #

输入框JSX部分 #

<input 
  type="text" 
  name="email" 
  id="email" 
  placeholder="Type your email here" 
  value={state.email} 
  onChange={handleChange2} 
/>

逻辑代码部分 #

// 修正后的handleChange2
const handleChange2 = (e) => {
  const value = e.target.value;
  setState({ ...state, [e.target.name]: value }); // 用e.target.name匹配输入框name
};

const handleSubscribe = (e) => {
  e.preventDefault();
  // 直接从state取email值
  if (state.email.trim() === '') {
    $("#error2").show("slow").delay(5000).fadeOut();
    $("#msg2").hide();
  } else {
    $("#msg2").show("slow").delay(5000).fadeOut();
    $("#error2").hide();
    
    const data = { name: state.email };
    // 重置输入框对应的email状态
    setState({ ...state, email: "" });
    
    axios.post('https://diggdevelopment.com/blackstallion_new/api/testinfo/', data)
      .then(function (response) {
        console.log(response.data);
      });
  }
};

额外说明 #

• 现在输入框通过value={state.email}绑定状态，配合onChange实时更新状态，实现双向绑定，输入内容会正常同步
• 提交时直接校验state.email，避免了变量引用错误
• 重置状态时正确更新email字段，确保输入框能清空

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