美文网首页
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