美文网首页
antd表单设置默认值和react hook 保存值无效的问题

antd表单设置默认值和react hook 保存值无效的问题

作者: ticktackkk | 来源:发表于2021-04-20 14:34 被阅读0次

表单设置默认值

有这样的需求 我开启优惠 价格需要禁用然后价格里面输入框的值全部清空
之前一直用这个form.setFieldsValue({})来设置表单的默认值,现在我的Form.Item不是单一的字符串name,
而是数组的形式,如果这样我们要改那一列的值 就需要用到form.setFields([{name: [name, index, "price"], value:null}])来修改,

image.png
  {
            title: '是否开启优惠',
            render: (text, record, index) => {
                return <Form.Item name={[name, index, "effectValue"]} style={{ textAlign: 'center' }} >
                    <Switch size='small' onChange={(e) => {
                      
                    }} />
                </Form.Item>
            }
        },
        {
            title: <span className='required'>价格(元/PCS)</span>,
            render: (text, record, index) => {
                return <Form.Item name={[name, index, "price"]} rules={[{ required: !isGoName.includes(record.productClass), message: '请输入价格(元/PCS)' }]}>
                  
                </Form.Item>
            }
        }

hook保存值无效的问题

image.png
问题

当我点击删除的时候 可以拿到我的数据data.splice(index,1),然后就直接setDate(data),理想情况下应该就是删除了我想要删除的那一行的数据

解决方法

返回一个新的数组
setData([...data])或者setData(data.slice())

相关文章

网友评论

      本文标题:antd表单设置默认值和react hook 保存值无效的问题

      本文链接:https://www.haomeiwen.com/subject/jylnlltx.html