当 antd formItem 中的值为假时，如何检查 antd 复选框？

Question

目前，我想做的是“反转”antd 复选框组件的行为。我想当 antD

value

的

initialValue

/

formItem

为

false

时取消选中该复选框。这是我当前的代码

<FormItem
  label="Include skills list in the search"
  labelCol={{ span: 24 }}
  initialValue={false}
  valuePropName="checked"
  name="ignoreSkills"
>
  <Checkbox value={false} defaultChecked={true}>Search on Skills</Checkbox>
</FormItem>

如果复选框位于

defaultChecked={true}

之外，设置

formItem

效果很好，但当它在内部时，一切都会中断。

我尝试过的事情：

1. 单独使用

   defaultChecked={true}

   。在 formItem 中不起作用
2. 使用

   checked={true}

   属性。里面不起作用

   formItem

知道如何在 antd 中实现这一点吗

formItem

？

Answer 1

您可以使用

getValueProps

和

getValueFromEvent

属性来实现逆行为。

getValueFromEvent

函数提供了一个自定义处理程序，如何从特定事件中提取值，即对于复选框，我们需要获取

e.target.checked

形式的值。所以我们通过了

valuePropName="checked"

。您可以使用此函数反转复选框的值。使用

getValueProps

，您可以定义如何从 props 中获取值。

import { Checkbox, Form } from 'antd';

const App = () => {
    return (
        <Form>
            <Form.Item
                label='Include skills list in the search'
                labelCol={{ span: 24 }}
                valuePropName='checked'
                name='ignoreSkills'
                getValueProps={(value) => ({ checked: !value })}
                getValueFromEvent={(e) => !e.target.checked}
            >
                <Checkbox>Search on Skills</Checkbox>
            </Form.Item>
        </Form>
    );
};

export default App;

Answer 2

    <FormItem
  label="Include skills list in the search"
  labelCol={{ span: 24 }}
  initialValue={
  "SearchOnSkills",
  }
  valuePropName="checked"
  name="ignoreSkills"
    >

  <Checkbox value="SearchOnSkills">Search on Skills</Checkbox>

</FormItem>

这段代码肯定可以很好地解决上述问题。它将从初始值中获取值并将其设为真正的默认值。您分配的 false 不是一个值，因此您面临这个问题。