React中使用useActionState时如何实时显示表单字段的字符长度

嗨，这个问题我刚好碰到过！咱们之前用useState的时候，直接同步输入值就能轻松拿到字符长度，但useActionState的逻辑不一样——它的state只有在表单提交后才会更新，实时输入的时候根本拿不到最新的输入内容，所以得换个思路。我给你分享两种靠谱的实现方式：

方法一：结合useState实时跟踪输入值 #

这是最贴近你之前写法的方案，额外用一个useState来同步输入框的实时值，完全不影响useActionState的提交逻辑。代码示例如下：

import { useActionState, useState } from 'react';

// 你的提交处理函数
function submit(prevState, formData) {
  // 这里可以写表单提交的业务逻辑，比如发送请求
  console.log('提交的昵称：', formData.get('nickname'));
  return { ...prevState, message: '昵称提交成功' };
}

export default function NicknameForm() {
  const initData = { nickname: '' };
  const [state, formAction] = useActionState(submit, initData);
  // 用额外的useState跟踪实时输入的昵称
  const [currentNickname, setCurrentNickname] = useState(initData.nickname);

  return (
    <form action={formAction}>
      <input
        name="nickname"
        value={currentNickname}
        onChange={(e) => setCurrentNickname(e.target.value)}
      />
      <div>当前字符数：{currentNickname.length}</div>
      {state.message && <p>{state.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

这个方案的好处是完全沿用了你熟悉的受控组件写法，实时同步输入值，字符数显示毫无延迟，而且表单提交时useActionState依然能通过formData拿到最新的昵称值，互不干扰。

方法二：使用useRef直接获取DOM输入值 #

如果你不想多维护一个状态，也可以用useRef直接访问输入框的DOM元素，读取它的实时value。不过要注意，非受控组件的输入不会自动触发组件重渲染，所以有时候需要手动触发更新来同步字符数显示：

import { useActionState, useRef, useState } from 'react';

function submit(prevState, formData) {
  console.log('提交的昵称：', formData.get('nickname'));
  return { ...prevState, message: '昵称提交成功' };
}

export default function NicknameForm() {
  const initData = { nickname: '' };
  const [state, formAction] = useActionState(submit, initData);
  const nicknameRef = useRef(null);
  // 用一个空状态触发重渲染，确保字符数实时更新
  const [, forceUpdate] = useState({});

  return (
    <form action={formAction}>
      <input
        name="nickname"
        defaultValue={initData.nickname}
        ref={nicknameRef}
        onChange={() => {
          // 每次输入时触发重渲染，让字符数更新
          forceUpdate({});
        }}
      />
      <div>当前字符数：{nicknameRef.current?.value.length || 0}</div>
      {state.message && <p>{state.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

这种方案适合不想用受控组件的场景，但因为需要手动触发重渲染，逻辑上比第一种稍复杂一点，我个人更推荐第一种方案，逻辑更清晰也更符合React的状态管理习惯。

最后再提醒一句：千万别直接用useActionState返回的state来拿实时长度哦，它只有在表单提交后才会更新，实时输入时根本拿不到最新值~

备注：内容来源于stack exchange，提问作者pvp11