AntD中input和form组件的问题

AntD中input的小坑

在用antd中我把input封装成的一个用来修改内容的小组件(input输入框的内容会根据从修改的内容展现默认值),当我使用了defaultValue这个属性 不管传值怎么变化这个defaultValue属性只有在第一次渲染的时候生效  随后的渲染一直用的时缓存中的数据。

因为每次打开组件的时候我需要跟新input中的值的  我就在input中添加了defaultValue这个属性  就出现了状态不更新的问题了

<Input  defaultValue={this.props.name} />

随后看的form中api  ,  可以通过form组件的setFieldsValue 对数据进行重置    setFieldsValue ({name:‘value‘}) ,因为我的这个项目中没用用到redux  和react hooks 就用了 状态管理比较轻便的一个小项目  如果你是通过class 构建的Components就通过ref来获取 from(antd)组件的数据域  =>  formRef = React.createRef();

如果你用的是hooks可以用  form = Form.useForm();来获取数据域

class Model extends Component{

  formRef = React.createRef();

 

 render(){

        return(

          <Form ref={this.formRef}>    

        <Form.Item name="username" >

              <Input/>

            </Form.Item>

       </Form>

)}}

我的是通过props传递的数据我应该在什么时候重置呢?刚一开始我想着肯定不能在组件创建的时候更新

就只能是在组件被调用运行的时候

首先想到的是父组件更新porps,尝试在 componentWillReceiveProps() 这个钩子函数中重置但是没有发生可能指form中的缓存机制

尝试在 componentWillUpdate()    这个钩子函数中实在render()之前执行的所有这个也失败了

当在 componentDidUpdate()  执行成功了这个歌可能是因为在antd中的缓存在render()中把默认值给渲染的我们在这个周期中重置form就可以了

class Model extends Component{
  formRef = React.createRef();

  onFill = () => {

      this.formRef.current.setFieldsValue({

        username: this.props.name,

      });

   };

  componentDidUpdate(){

      this.onFill()

   }

 render(){
        return(
          <Form ref={this.formRef}>    
     <Form.Item name="username" >
                <Input/>
            </Form.Item>
    </Form>
)}}

原文地址:https://www.cnblogs.com/geter/p/12427452.html

时间: 2024-10-09 03:36:05

AntD中input和form组件的问题的相关文章

native-base中Input,Textarea等组件在ios平台下不能输入中文

在上文react-native中TextInput在ios平台下不能输入中文已经解决. 但是在native-base中Input和Textarea都存在这样的问题.为了不要写多个组件,封装以下代码: import React from 'react'; import PropTypes from 'prop-types'; import { Platform, } from 'react-native'; import { Textarea, Input, } from 'native-base

VUE 中 使用 iview Form组件 enter键防止页面刷新

<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent ="()=>{}"> 或者使用官方的 @submit.native.prevent 原文地址:https://www.cnblogs.com/smzd/p/9197915.html

Django的form组件

forms组件 forms组件,是一个类.在视图函数中创建一个类,类需要继承forms.Form from django import  forms 1.校验数据 步骤和语法: 1. 创建一个forms类,该类需继承forms.Form  , 得到一个类(假设为EmpForm),用于校正数据 2.把用户信息传给ef=EmpForm(request.POST),得到一个form对象ef(传入的数据必须为字典) 3. ef.is_valid()  ,数据都合格为True ,否则为False 4.ef

django之form组件、cookie、session

django之form组件.cookie.session django form组件 1.渲染标签 2.校验数据 3.展示信息 校验数据 # 第一步需要一个form类 from django import forms class MyForm(forms.Form): name = forms.CharField(max_length=8) password = forms.CharField(max_length=8,min_length=3) email = forms.EmailField

Django 之 Form 组件

常用功能 From 组件主要有以下几大功能: 生成 HTML 标签 验证用户数据(显示错误信息) HTML Form 提交保留上次提交数据 初始化页面显示内容 小试牛刀 下面我们通过 Form 组件来生成 HTML 标签和验证用户提交的数据以及保留上次提交的数据. 创建 Form 类 form_verify.py from django import forms from django.forms import fields class FormVerify(forms.Form): user

Django中Form组件拾遗(比较坑爹的地方+易忽略的点)

[001]Form组件之自动渲染一个ID选择器 在前面的章节中,我们使用了Django自带的Form组件帮我们完成对表单数据的校验,借助于Form组件,它帮我们自动渲染出input输入框,之前没怎么注意这块,最近才发现 它帮我们渲染出的input输入框自带了id选择器,来看如下的截图就明白了,这个地方坑了很久: <input class="form-control" id="id_email" name="email" placeholde

python3-开发进阶Django-form组件中model form组件

Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库中有这样一张学生表,字段有姓名,年龄,爱好,邮箱,电话,住址,注册时间等等一大堆信息,现在让你写一个创建学生的页面,你的后台应该怎么写呢?首先我们会在前端一个一个罗列出这些字段,让用户去填写,然后我们从后天一个一个接收用户的输入,创建一个新的学生对象,保存其实,重点不是这些,而是合法性验证,我们需要在前端判

Django 框架篇(九): Django中的Form 组件

Django中的Form组件,帮我们处理了 form表单中的校验, 和错误提示的处理: 主要功能: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 使用form组件实现注册功能 1.  定义一个类, 继承django中的 forms.Form 代码实例: from django import forms # 按照Django form组件的要求自己写一个类 class RegForm(forms.Form): name = forms.CharField(label="用

Django中Form组件的使用

Form介绍 HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入的长度和格式等正不正确.如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.. Django form组件就实现了上面所述的功能. 总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 普通方式手写注册功能 views.p