我是ReactJS的新手.我想禁用更新按钮,如果邮政编码长度小于5或零.

let zipCodeButton = true;
function zipCodeChange(event) {
    if (event.target.value.length === 5 && event.target.value !== "00000") {
        zipCodeButton = false;
    }
}


// function isDisabled() {
//  return zipCodeButton;
// }
//const [zipCode, zipCodeChange] = useState("");

const NavigationUtilityZipCode = () => (    
                    <input type="text" id="zip-code-header" className="body-medium" maxLength={5} onChange={zipCodeChange} onKeyDown={(event) => {
                        if (!/[0-9]/.test(event.key) && event.code != "ArrowLeft" && event.code != "ArrowRight" && event.code != "Backspace" && event.code != "Delete" && event.code != "Tab") {
                            event.preventDefault();
                        }
                    }} />
                <Button jcrTitle="Update Zip Code" primary={false} disabled={zipCodeButton} id="handle-update-zip-code-click"></Button>
);

export default NavigationUtilityZipCode;

推荐答案

您可以这样做:

import React, { useState } from "react";

const App = () => {
  const [zipCode, setZipCode] = useState("");
  const [zipCodeButtonVisible, setZipCodeButtonVisible] = useState(true);

  const triggerZipCodeChange = (e) => {
    const value = e.target.value;
    setZipCode(value);
    if (value.length === 5 && value !== "00000") {
      setZipCodeButtonVisible(false);
    } else {
      setZipCodeButtonVisible(true);
    }
  };

  return (
    <>
      <input
        type="text"
        id="zip-code-header"
        className="body-medium"
        maxLength={5}
        onChange={triggerZipCodeChange}
        onKeyDown={(event) => {
          if (
            !/[0-9]/.test(event.key) &&
            event.code !== "ArrowLeft" &&
            event.code !== "ArrowRight" &&
            event.code !== "Backspace" &&
            event.code !== "Delete" &&
            event.code !== "Tab"
          ) {
            event.preventDefault();
          }
        }}
        value={zipCode}
      />
      <button
        disabled={zipCodeButtonVisible}
        onClick={() => {
          console.log("You can call any function here ");
        }}
      >
        Update Zip Code
      </button>
    </>
  );
};

export default App;

Explanation :

最初我们将按钮设置为禁用,并在TriggerZipCodeChange函数中根据您的要求判断条件.如果所有要求都满足了,那么我们将通过将状态setZipCodeButtonVisible设置为FALSE来将按钮的失效标记为FALSE.

希望这能对你有所帮助.如果您仍然有任何困惑和问题.请让我知道.

Reactjs相关问答推荐

REACT路由DOM根据参数呈现不同的路由

useTranslation不会在languageChanged上重新呈现组件

无法从正在使用Reaction的Electron 商务store 项目中的购物车中删除项目

单击空白区域时,Reaction Multiple下拉组件不关闭

如何在整个应用程序中显示通用弹出窗口中的点击事件

使用experial_useFormState将参数传递给服务器操作

在任何渲染之前在ReactJs中获取数据

Symfony ux-react:使用react_component()时React组件不会渲染

如何管理组件列表的复杂状态? (Nextjs/ReactJS)

如何初始化 redux 全局存储 preloadedState

如何处理页面加载时发生的 reactjs 错误?

react 事件顺序

vdom 最终更新了 dom(在比较之后)任何 dom 更改实际上应该触发整个树的重绘和回流,那么 vdom 有什么用?

Cypress ,重试不再附加到 DOM 的元素

如何从其他组件访问 useQuery refetch 方法?

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x?

在表格中显示具有自定义声明的用户状态

多次响应获取发送请求

调用函数以获取数据并在数据到达时导航到链接

Context Api React 的问题