如何使用useActionState Hook实现表单为空时禁用提交按钮？

要实现用useActionState管理的表单中，提交按钮在输入为空时禁用，且不用拆分子组件的需求，你可以同时用useState跟踪实时输入值，和useActionState配合使用，两者完全不冲突。

修改后的代码示例 #

import { useActionState, useState } from "react";

export function MyForm() {
  // useActionState 处理表单提交后的状态逻辑
  const [state, formAction] = useActionState(
    updateState,
    { name: ""}
  );

  // 新增：用useState跟踪实时输入值，专门用于按钮禁用判断
  const [inputValue, setInputValue] = useState("");

  function updateState(_prevState, formData) {
    const name = formData.get("name") as string;
    // 提交后可选：同步清空输入框，和useActionState的状态保持一致
    setInputValue("");
    return { name };
  }

  // 原useState管理的表单逻辑（保留不变）
  const [state2, setState2] = useState({name: ""})
  function handleChange(e) {
    setState2({name: e.target.value})
  }
  function handleSubmit(e) {
    e.preventDefault()
    // do something
    setState2({name: ""})
  }

  return (
    <>
      {/* 修改后的useActionState表单 */}
      <form action={formAction}>
        <input 
          type="text" 
          name="name" 
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        {/* 根据实时输入值判断禁用状态，trim()处理纯空格的情况 */}
        <button type="submit" disabled={!inputValue.trim()}>Submit</button>
        <div>{state.name}</div>
      </form>

      {/* 原useState管理的表单 */}
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" onChange={handleChange} value={state2.name}/>
        <button disabled={!state2.name.trim()} type="submit">Submit</button> 
        <div>{state2.name}</div>
      </form>
    </>
  )
}

逻辑说明 #

1. 实时输入跟踪：新增的inputValue状态专门用来同步用户的实时输入，通过绑定input的value和onChange事件，确保输入状态实时更新。
2. 按钮禁用判断：提交按钮的disabled属性通过!inputValue.trim()判断，当输入为空或纯空格时自动禁用。
3. 状态同步：在updateState提交处理函数中，可以调用setInputValue("")，实现提交后自动清空输入框，和useActionState返回的状态保持同步。

这种方式既保留了useActionState处理表单提交的核心逻辑，又满足了实时校验按钮状态的需求，完全不需要拆分表单到子组件中。

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