javascript 当一个antd表单项中的值为falsy时，我如何选中一个antd复选框？

dw1jzc5e 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(216)

目前，我想做的是"反转" antd checkbox组件的行为。当antD formItem的value/initialValue为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>

如果复选框在formItem的外部，设置defaultChecked={true}可以正常工作，但当它在内部时，一切都会中断。
我尝试过的事情：
1.单独使用defaultChecked={true}。在formItem中不起作用
1.使用checked={true}属性。在formItem中不起作用
你知道如何在antd formItem中实现这一点吗？

JavaScript

来源：https://stackoverflow.com/questions/75579784/how-can-i-have-an-antd-checkbox-checked-when-its-value-is-falsy-inside-an-antd-f

1条答案

按热度按时间

wbgh16ku1#

你可以使用getValueProps和getValueFromEvent prop来实现反转行为。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;

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 当一个antd表单项中的值为falsy时，我如何选中一个antd复选框？

1条答案

相关问题

热门标签

最新问答