NextJS中React-Bootstrap Form.Control onChange报错返回undefined

核心错误原因 #

出现ReferenceError: value is not defined是因为你在Form.Control的value属性中引用了未声明的变量，或在处理函数中直接使用了未定义的value变量；提交时拿到undefined则是因为未正确同步输入值到状态，或未正确获取控件当前值。

解决方案 #

方案1：使用受控组件（推荐） #

通过React状态绑定输入值，确保状态与输入控件同步：

import { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

export default function InputForm() {
  // 声明状态存储输入内容
  const [inputVal, setInputVal] = useState('');

  // 输入变化时更新状态
  const handleInputChange = (e) => {
    setInputVal(e.target.value);
  };

  // 提交时从状态取值
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交的值:', inputVal);
    // 调用你的changeHandler并传入值
    // changeHandler(inputVal);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Control
        type="text"
        value={inputVal} // 绑定状态到输入控件
        onChange={handleInputChange} // 绑定变化处理函数
        placeholder="请输入内容"
      />
      <Button type="submit" className="mt-3">提交</Button>
    </Form>
  );
}

方案2：使用非受控组件（适合简单场景） #

通过useRef直接获取输入控件的DOM元素值：

import { useRef } from 'react';
import { Form, Button } from 'react-bootstrap';

export default function InputForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 通过ref获取当前输入值
    const inputVal = inputRef.current?.value;
    console.log('提交的值:', inputVal);
    // 传入changeHandler
    // changeHandler(inputVal);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Control
        type="text"
        ref={inputRef} // 绑定ref到控件
        placeholder="请输入内容"
      />
      <Button type="submit" className="mt-3">提交</Button>
    </Form>
  );
}

关键注意事项 #

• 受控组件必须同时绑定value和onChange，否则输入会被锁定无法编辑
• 避免在Form.Control中使用未声明的变量作为value属性值，这会直接触发ReferenceError
• 提交时优先从状态（受控）或ref（非受控）取值，不要直接引用未定义的变量

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