React Typescript：使用变量禁用复选框答案

【问题标题】：React Typescript: Checkbox disabled using variableReact Typescript：使用变量禁用复选框
【发布时间】：2021-12-29 02:28:18
【问题描述】：

console.log(disabled) 正在返回 true，但 checkbox 并未被禁用。

let disabled: boolean;

const GroupChange = (value) => {
   var index = dropdownItems.findIndex(item => item.group == value);
   ...

   disabled = dropdownItems[index].deactivated;
}

Form 与 Checkbox:

<Form.Item label="Gruppe" name="group">
   <Select onChange={GroupChange}>
      {dropdownItems.map((item, index) => <Select.Option value={item.group} key={index}>{item.group}</Select.Option>)}
   </Select>
</Form.Item>

<Form.Item label="Aktiv" name="active" valuePropName="checked">
   <Checkbox disabled={disabled} /> //<- is always active 
</Form.Item>
...

【问题讨论】：

如果你用"disabled"而不是{disabled}会怎么样

标签： javascript reactjs typescript antd

【解决方案1】：

在 AntDesign 中，您使用称为 dependencies 的东西：

<Form.Item label="Gruppe" name="group">
   <Select>
      {dropdownItems.map((item, index) => <Select.Option value={item.group} key={index}>{item.group}</Select.Option>)}
   </Select>
</Form.Item>
<Form.Item dependencies={['group']}>
 {({getFieldValue}) => {
    const groupValue = getFieldValue('group')
    const isDisabled = dropdownItems.find(item => item.group === groupValue)?.deactivated
    return (
      <Form.Item label="Aktiv" name="active" valuePropName="checked">
        <Checkbox disabled={isDisabled} />
      </Form.Item>
    )
 }}
</Form.Item>

您使用 dependencies 属性渲染 Form.Item。 child 是一个函数，它获取表单方法作为参数，并在依赖项的值发生变化时被调用。

您不再需要了，onGroupChange。

【讨论】：