javascript 使用useRef输入和React禁用按钮时出现故障

clj7thdc 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(112)

我有一个react组件，有四个ref对象，如下所示。

const lastNameRef = useRef<HTMLInputElement>(null);
  const firstNameRef = useRef<HTMLInputElement>(null);
  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);

我也有一个不同的按钮组件，它采用了一个禁用标志作为 prop 。

<SignInOrSignUpButton
  disabled={false}
  icon={faGear}
  isLoading={isLoading}
  onClick={handleSignUp}
  text="Create Account"
/>

我试图禁用按钮时，我的任何输入是空的.这里是我第一次尝试我试图检查是否有任何输入s value的长度为0意味着输入是空的.这没有工作

<SignInOrSignUpButton
  disabled={
    lastNameRef.current?.value.length === 0 ||
    firstNameRef.current?.value.length === 0 ||
    emailRef.current?.value.length === 0 ||
    passwordRef.current?.value.length === 0
  }
  icon={faGear}
  isLoading={isLoading}
  onClick={handleSignUp}
  text="Create Account"
/>

我还尝试了useState和useEffect的组合，但也没有成功。

useEffect(() => {
    if (
      lastNameRef.current?.value.length === 0 ||
      firstNameRef.current?.value.length === 0 ||
      emailRef.current?.value.length === 0 ||
      passwordRef.current?.value.length === 0
    ) {
      setIsButtonDisabled(true);
    } else {
      setIsButtonDisabled(false);
    }
  }, [
    lastNameRef.current?.value,
    firstNameRef.current?.value,
    emailRef.current?.value,
    passwordRef.current?.value,
  ]);

<SignInOrSignUpButton
  disabled={isButtonDisabled}
  icon={faGear}
  isLoading={isLoading}
  onClick={handleSignUp}
  text="Create Account"
/>

请帮帮我。

JavaScript

来源：https://stackoverflow.com/questions/75782191/trouble-disabling-button-using-useref-inputs-and-react

2条答案

按热度按时间

3pvhb19x1#

这里的问题是更新ref s不会导致组件重新呈现，并且您采用的三种不同方法需要组件重新呈现，以便将按钮显示为禁用。
尽管文档建议使用ref作为“逃生舱口”，但如果你被迫继续使用ref s而不是state，请为button添加另一个ref。

const buttonRef = useRef(null);

创建一个函数来更改button的disabled属性：

const enableButton = () => {
  if (inputRef?.current?.value.length === 0) {
    if (buttonRef.current) {
      buttonRef.current.disabled = true;
    }
  } else {
    if (buttonRef.current) {
      buttonRef.current.disabled = false;
    }
  }
};

因此，当<input>发生变化时，每个<input>都会更新buttonRef。例如：

<input type="text" ref={THE_INPUT_REF} onChange={() => enableButton()}/>

创建一个返回true/false的函数来设置按钮的初始禁用值

const isInitiallyDisabled = () => {
    if (inputRef?.current?.value.length > 0) {
      return false;
    } else {
      return true;
    }
  };

将buttonRef引用传递给按钮组件。注意：由于您使用自己的函数组件，因此必须在组件中使用forwardRef来传递buttonRef

<SignInOrSignUpButton
  ref={buttonRef}
  disabled={isInitiallyDisabled()}
  icon={faGear}
  isLoading={isLoading}
  onClick={handleSignUp}
  text="Create Account"
/>

赞(0）回复(0）举报 2023-03-21

bjp0bcyl2#

你的代码不起作用，因为React不会重新渲染你的组件。useRef被用作一个普通的JavaScript对象，在渲染之间保持不变，但是修改它不会导致重新渲染，因为修改了任何嵌套的属性。
我会用简单的状态来实现你所尝试的任何东西，将输入从不受控制的转换为受控制的输入。

赞(0）回复(0）举报 2023-03-21