next.js 表格中的Ant-Design开关因值而出错

fdx2calv  于 2023-03-12  发布在  其他
关注(0)|答案(1)|浏览(129)

我正在Next JS中动态创建Ant Design Form.Item,如下所示:

<Form.Item initialValue={initValue} key={property.key} name={property.key} label={property.name}>
    {component}
</Form.Item>

当组件是Switch时,将按如下方式创建:

component = <Switch defaultChecked={initValue} />

我在浏览器中收到此错误:“警告:[附加:开关] value不是有效的属性,您的意思是checked吗?“x1c 0d1x
我尝试过不同的解决方案,例如从Form.Item中删除initialValue属性,以及添加valuePropName="checked"getValueFromEvent={(value) => value ? value.checked : false}
然而,我总是收到这个错误警告。此外,如果我删除了initialValue,那么当我提交表单时,如果用户不更新它,开关就不会被包含。也就是说,如果只使用defaultChecked={true}设置,它的默认值会被忽略,我必须包含initialValue={true},否则表单可能会在没有包含开关值/检查的情况下提交。
我如何总是提交开关值并避免这个丑陋的console.log错误消息?

nqwrtyyt

nqwrtyyt1#

我认为如果值为true,你只需要传递defaultChecked,如果值为false,你就不需要传递,这是因为checked属性没有值,你可以传递或者完全删除它。

<Form.Item initialValue={initValue} key={property.key} name={property.key} label={property.name}>
    { initValue ?
     <Switch defaultChecked /> :  <Switch />
    }
</Form.Item>

相关问题