无需使用useState实现Remix表单提交按钮禁用

没问题，完全可以不用useState来实现提交按钮的禁用逻辑，下面是几种贴合Remix简洁特性的实现方式：

方案1：用HTML5原生表单约束验证（最轻量化） #

直接借助HTML5的表单验证属性，不需要任何状态管理，依赖浏览器原生能力就能实现：

<Form method="post">
  <input type="text" minlength="2" required />
  <button type="submit">Submit</button>
</Form>

如果想要实时的视觉反馈，可以加一点CSS（可选）：

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

不过原生的minlength和required默认是提交时才触发验证，如果要实时禁用按钮，可以结合原生DOM事件。

方案2：useRef + 原生DOM操作（自定义验证逻辑） #

通过useRef获取输入框和按钮元素，监听输入事件直接修改按钮的disabled状态，全程不用useState：

import { useRef, useEffect } from "react";
import { Form } from "@remix-run/react";

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

  useEffect(() => {
    const updateBtnState = () => {
      const inputValue = inputRef.current?.value || "";
      submitBtnRef.current.disabled = inputValue.length < 2;
    };

    // 绑定输入事件
    const inputEl = inputRef.current;
    inputEl?.addEventListener("input", updateBtnState);
    
    // 初始化按钮状态
    updateBtnState();

    // 组件卸载时移除监听
    return () => inputEl?.removeEventListener("input", updateBtnState);
  }, []);

  return (
    <Form method="post">
      <input type="text" ref={inputRef} />
      <button type="submit" ref={submitBtnRef}>Submit</button>
    </Form>
  );
}

方案3：结合Remix的提交状态控制（进阶） #

如果还要同时处理表单提交中的禁用（防止重复提交），可以搭配Remix的useNavigation，依然不用useState：

import { Form, useNavigation } from "@remix-run/react";
import { useRef, useEffect } from "react";

export default function MyForm() {
  const inputRef = useRef(null);
  const submitBtnRef = useRef(null);
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  useEffect(() => {
    const updateBtnState = () => {
      const inputValue = inputRef.current?.value || "";
      submitBtnRef.current.disabled = inputValue.length < 2 || isSubmitting;
    };

    const inputEl = inputRef.current;
    inputEl?.addEventListener("input", updateBtnState);
    updateBtnState();

    // 监听提交状态变化
    const handleStateChange = () => updateBtnState();
    navigation.addEventListener("statechange", handleStateChange);

    return () => {
      inputEl?.removeEventListener("input", updateBtnState);
      navigation.removeEventListener("statechange", handleStateChange);
    };
  }, [isSubmitting]);

  return (
    <Form method="post">
      <input type="text" ref={inputRef} />
      <button type="submit" ref={submitBtnRef}>
        {isSubmitting ? "提交中..." : "提交"}
      </button>
    </Form>
  );
}

这几种方案都避开了useState来管理输入值，完全符合你想要的Remix简洁特性：第一种最适合简单场景，第二种适合需要自定义验证规则的情况，第三种则兼顾了输入验证和提交状态的控制。

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