是否可以将函数传递给 Chakra 组件的 isInvalid 属性？

• Chakra UI 的 isInvalid 属性仅支持接收布尔值作为入参，你直接传入函数时，属性拿到的是函数本身而非函数执行结果。在 JavaScript 中函数属于真值（truthy），因此无论函数返回什么，isInvalid 都会被判定为 true，导致组件始终显示无效状态。
• 若传入变量没有同步生效，大概率是该变量未使用响应式状态管理（比如没有用 React 的 useState/useReducer 托管），普通变量的变更不会触发组件重渲染，组件无法拿到最新的变量值，自然不会更新展示状态。

1. 直接给 isInvalid 传入布尔值或者布尔表达式的执行结果，不要传入函数：

<Input
  {/* 直接写判断表达式，每次重渲染会自动计算最新布尔值 */}
  isInvalid={inputs.nmfc === 'illegalvalue'}
  name="nmfc"
  value={inputs.nmfc}
  onChange={handleChange}
/>

2. 确保用来做有效性判断的输入状态是响应式托管的，比如用 useState 管理输入值，确保输入变更时会触发组件重渲染，同步更新 isInvalid 的判断结果，完整示例如下：

import { useState } from 'react';
import { Input } from '@chakra-ui/react';

function FormDemo() {
  // 响应式管理输入状态
  const [inputs, setInputs] = useState({
    nmfc: ''
  });

  const handleChange = (e) => {
    setInputs(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  return (
    <Input
      isInvalid={inputs.nmfc === 'illegalvalue'}
      name="nmfc"
      value={inputs.nmfc}
      onChange={handleChange}
    />
  );
}

如果使用表单状态管理库（如 React Hook Form、Formik），需要确保你绑定的表单状态是库提供的响应式状态，避免用独立的普通变量做判断。

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