Antd 中 Input 组件默认值的显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Antd 中 Input 组件默认值的显示相关的知识,希望对你有一定的参考价值。

参考技术A 但是有一些样式的问题(字体颜色会淡一点)

注意:当Form组件和Input组件一起用时,defaultValue在Input组件上无法生效

使用方法:form.getFieldDecorator配置initialValue参数:默认值

这里将Antd中form组件的注意事项列出来(很重要,使用过程中经常会碰到)

经过 getFieldDecorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

1、你 不再需要也不应该 用 onChange 来做同步,但还是可以继续监听 onChange 等事件。

2、你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue。

3、你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。

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>
)}}

 

 

 

以上是关于Antd 中 Input 组件默认值的显示的主要内容,如果未能解决你的问题,请参考以下文章

antd input组件及原生input标签取消自动显示历史记录

React Antd 中如何修改覆盖默认样式及样式引用

React Antd 中如何修改覆盖默认样式及样式引用

使用 antd Table组件, 异步获取数据

Antd form表单中input失效,无法输入字符串,只能输入单个字符

我们一起踩过的坑----react(antd)