NextJS表单输入框无法输入求助：绑定value后无法编辑

你遇到的核心问题是受控组件的状态同步逻辑缺失：设置value={supplier.nameDisplayed}后，输入框变成受控组件，必须通过onChange更新绑定的状态值，否则输入内容无法修改；但你又需要在API数据更新（比如数据库同步后）时自动同步输入框内容，所以得结合本地状态和API数据的监听。

规范解决方案：本地状态 + API数据监听 #

不需要直接操作ref，用React的状态管理就能完美解决，步骤如下：

1. 维护一个本地状态，初始值从useSWR返回的supplier中获取
2. 监听useSWR的supplier变化，当API数据更新时同步更新本地状态
3. 输入框绑定本地状态和onChange事件

代码示例：

import { useState, useEffect } from 'react';
import useSWR from 'swr';

// 假设你的useSWR请求逻辑
const { data: supplier } = useSWR('/api/supplier', fetcher);

export default function SupplierForm() {
  // 初始化本地状态，fallback为空字符串避免undefined
  const [nameDisplayed, setNameDisplayed] = useState(supplier?.nameDisplayed || '');

  // 当API返回的supplier更新时，同步本地状态
  useEffect(() => {
    if (supplier?.nameDisplayed) {
      setNameDisplayed(supplier.nameDisplayed);
    }
  }, [supplier]);

  // 表单提交逻辑，直接用本地状态nameDisplayed
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 提交nameDisplayed到后端
    fetch('/api/update-supplier', {
      method: 'POST',
      body: JSON.stringify({ nameDisplayed }),
      headers: { 'Content-Type': 'application/json' }
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text"
        className='p-2 rounded'
        name='nameDisplayed'
        value={nameDisplayed}
        onChange={(e) => setNameDisplayed(e.target.value)}
      />
      <button type="submit">更新</button>
    </form>
  );
}

关于直接操作ref的问题 #

你用nameDisplayedRef.current.value = supplier.nameDisplayed能运行，但属于非受控组件的强制修改，TypeScript报错是因为React不推荐这种操作（破坏了受控组件的状态单向数据流），长期来看可能导致状态不同步的隐藏bug，比如表单提交时拿到的不是最新输入值，所以不建议这么用。

这样既满足了：

• 输入框可正常编辑
• API数据更新（数据库同步后）自动同步输入框内容
• 只在表单提交时处理数据，无需关注实时输入变更

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