React-hook-form结合antd时defaultValue不更新的解决方式

最近使用react-hook-form结合ant design的输入组件做表单,发现从接口获取的组件defaultValue不会更新到antd组件上,后来发现是因为antd的defaultValue一旦赋值不允许再次修改。

解决方法:将antd的key设置成defaultValue一致,或者随defaultValue一起更新,defaultValue更新时,因为key不同,组件会重新渲染,更新defaultValue。

<Controller
  as={
    	<Input />
      }
  disabled={props.disabled}
  key={props.defaultValue||props.name}
  name={props.name}
  control={props.control}
  id={props.id}
  defaultValue={props.defaultValue}
  rules={{
           required: props.required ? props.reqMsg?props.reqMsg:'必填' : '',
        }}
  placeholder={props.placeholder}
  maxLength={props.maxLength}
  style={props.style}
/>
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
对于使用 React Hooks 和 Ant Design 的 Form 组件来进行自定义文本框的校验,输入内容立即消失的问题,你可以尝以下方法: 1. 使用 useState Hook 来踪输入框的值,并在输入框值生变化更新状态。 2. Form 组件的 onFinish 回调函数中进行校逻辑。可以通过检查输入框的是否符合要求来决定是否提示错误信息。 3. 使用 Ant Design 的 message 组件来显示错误提示信息。可以校验失败调 message.error() 方法来显示信息,并在校验成功用 message.success() 方法消除提示信息。 以下一个示例代码: ```jsximport React, { useState 'react'; import { Form, Input, Button, message } from 'antd'; const MyCustomRichTextEditor = () => { const [content, setContent] = useState(''); const onFinish = (values) => { //行校验逻辑 if (content === '') { message.error('内容不能为空'); return; } // 校验通过,提交表单 // ... // 提示信息消失 message.success('提交成功'); }; return ( <Form onFinish={onFinish}> <Form.Item name="content" rules={[{ required: true, message: '请输入内容' }]} > <Input.TextArea value={content} onChange={(e) => setContent(e.target.value)} /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); }; export default MyCustomRichTextEditor; ``` 在上面的代码中,我们使用 useState 来追踪输入框的值,并在输入框值发生变化更新状态。在 onFinish 回调函数中,我们进行了校验逻辑,如果发现内容为空,则使用 message.error() 方法显示错误信息,否则使用 message.success() 方法显示提交成功的提示信息。 希望这个示例能解决你的问题!如果还有其他问题,请随提问。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值