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

Question

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>
...

Answer 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。

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

React Typescript: Checkbox disabled using variable

javascript

typescript

reactjs

antd