首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在getfielddecorator antd中动态改变initialValue?

在getfielddecorator antd中动态改变initialValue可以通过使用getFieldDecorator的options参数来实现。getFieldDecorator是antd表单组件中的一个高阶函数,用于将表单控件与表单数据进行双向绑定。

在options参数中,可以通过initialValue属性来设置初始值。如果需要动态改变initialValue,可以通过在组件的state中定义一个变量,然后在getFieldDecorator的options中使用这个变量作为initialValue的值。

以下是一个示例代码:

代码语言:txt
复制
import { Form, Input } from 'antd';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialValue: '初始值',
    };
  }

  handleChangeInitialValue = () => {
    this.setState({ initialValue: '新的初始值' });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { initialValue } = this.state;

    return (
      <Form>
        <Form.Item>
          {getFieldDecorator('fieldName', {
            initialValue: initialValue,
          })(
            <Input />
          )}
        </Form.Item>
        <button onClick={this.handleChangeInitialValue}>改变初始值</button>
      </Form>
    );
  }
}

const WrappedForm = Form.create()(MyForm);

在上述代码中,我们在MyForm组件的state中定义了一个initialValue变量,并将其作为getFieldDecorator的options中initialValue的值。然后,在handleChangeInitialValue方法中,我们可以通过setState来改变initialValue的值。当点击"改变初始值"按钮时,initialValue的值会更新,从而动态改变getFieldDecorator的初始值。

这样,我们就可以在getfielddecorator antd中动态改变initialValue了。

关于antd的getFieldDecorator和Form组件的更多信息,可以参考腾讯云的Ant Design官方文档: https://ant.design/components/form-cn/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Hook技术实战篇

Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, State Hook提供类型setState的功能, Effect Hook..., useEffect的的fetchData会再次被触发, 从而实现手动触发数据订阅的效果....这也就是使用Effect Hook来获取数据的方式, 关键在useEffect的第二个参数所依赖的项, 当依赖的项发生改变时, 第一个参数的内的函数也会被再次触发, 如果没用发生改变, 则不会再次执行,...Reducer Hook返回一个状态对象和一个改变状态对象的函数....例子, 获取的数据和loading状态没有发生改变, 不过都聚合到了reducer, 又Reducer Hook集中管理. const dataFetchReducer = (state, action

4.3K80

React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件

前言 最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象的好用,看到umi 2.x了.就着手又开始重构了......---- 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecoratorinitialValue,已经暴露 ---- 实现的功能 支持的props...submit"> 下载报表 复制代码 数据源格式 data的数据格式基本和antd...Row, Col, Input, Button, Select, DatePicker, Card, Cascader, Radio, Icon, } from 'antd

2.6K10

​Ant Disign 4.0 升级实践扑街指南 (一)

扑街第一步:antd4-codemod 运行 antd4-codemod src 控制台: 出师未捷身先死 问题不大, 我们老实人不怕这个。 缺少core-js, 那就装一个。...直到又爆了新的错误: 搜索到一些答案: 按照文章的提示,逐个修改,等待安装。 运行一下, 还是不行。。。 表情逐渐凝固。 这时候已经六七点了,看看外面, 天都黑了。...Form 组件现在自带数据域,因而 getFieldDecorator 也不再需要,直接写入 Form.Item 即可: // antd v3 const Demo = ({ form: { getFieldDecorator...editors=0011 在官网, 也找到了这样的描述: 在 v3 版本,修改未操作的字段 initialValue 会同步更新字段值,这是一个 BUG。...在 v4 ,该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。 所以, initialValue 只能作为组件初次挂载的时候生效。

1.4K10

React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)

前言 最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象的好用,看到umi 2.x了,就着手又开始重构了。...仅有一个非Input控件的时候,去除卡片效果 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecoratorinitialValue,已经暴露 实现的功能 使用姿势 <AdvancedSearchForm...'; // lodash 深比较 import isEqual from 'lodash/isEqual'; // antd const { MonthPicker, RangePicker } =...渲染的数据这些 return { data: newData, prevData: nextProps.data }; } return null; } // 清除表单数据字符串的两边的空格

12410

Form 表单在数栈的应用(上): 校验篇

本文的重点为 Form 表单的校验及在数栈的应用,偏向于应用总结与心得分享。...首先是存在多层 form 嵌套的问题,也就是说同一个页面里可能还包含或嵌入多个 form 表单,类似问题的核心就在于如何在一个页面拿到当前容器的 form 实例和嵌套的 form 示例。...5. table 与 form 的碰撞 (组件联动校验) 业务场景:数栈其实存在各种与 form 联动的案例,笔者取 数据资产 (data-assets-front) 项目为例,在 table 动态插入单条数据并实现可自定义校验内容...(`mapping[${index}].ip`, { initialValue: ip || "", validateFirst...对于 antd 4.x 的 form 校验,这里也做了一个简单的总结,有兴趣的同学可以移步 antd form 4.x 进行探究: 首先对于「声明式」校验有个改变: <Form.Item {...formItemLayout

2.1K20

Form 表单在数栈的应用(上): 校验篇

本文的重点为 Form 表单的校验及在数栈的应用,偏向于应用总结与心得分享。...首先是存在多层 form 嵌套的问题,也就是说同一个页面里可能还包含或嵌入多个 form 表单,类似问题的核心就在于如何在一个页面拿到当前容器的 form 实例和嵌套的 form 示例。...5. table 与 form 的碰撞 (组件联动校验) 业务场景:数栈其实存在各种与 form 联动的案例,笔者取 数据资产 (data-assets-front) 项目为例,在 table 动态插入单条数据并实现可自定义校验内容...(`mapping[${index}].ip`, { initialValue: ip || "", validateFirst...对于 antd 4.x 的 form 校验,这里也做了一个简单的总结,有兴趣的同学可以移步 antd form 4.x 进行探究: 首先对于「声明式」校验有个改变: <Form.Item {...formItemLayout

1.3K20

10分钟精通Ant Design Form表单

被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就是Form表单了。...自身状态改变了 所以进一步讲,包装组件的目的就是为了被包装组件的父组件更新,一旦被getFieldDecorator修饰过的组件触发onChange事件,便会触发这个父组件的的更新(forceUpdate...:Form.create()(A) A就是我们所说的被包装组件 注册(getFieldDecorator): getFieldDecorator的目的是为了把需要收集的数据在实例中进行注册,并把注册的值同步到被...举一个很简单也很常见的栗子: 在系统同一份数据被多处组件(包含可编辑的Form)使用是常有的事情,我们在表单改变这份数据,同时数据的改变同步到各个相关组件,非常easy的完成了需求。...但很多时候我们希望表单数据改变后并不需要及时的同步到其它组件,而是当用户点击确定按钮后才将数据同步,我们就不得不将这份数据进行复制甚至是深复制来满足需求,甚是蛋疼。

2.6K30

Antd Form 实现机制解析

具体到真实的业务场景,往往更复杂,其中包含多种表单组件, Input、Checkbox、Radio、Upload,还有一些自定义表单组件。 ?...Form 组件流程分析 我们通过 Antd Pro 登录页面的实现来一起看一下,Form 内部的调用流程。...在这个阶段还会收集组件的元数据,也就是我们调用 getFieldDecorator 传入的 option 配置,这些配置会存入 fieldStore 的 fieldsMeta 对象,作为组件的元数据...“Form 通过 getFieldDecorator 对组件进行包装,接管组件的 value 和 onChange 属性,当用户输入改变时,触发 onCollect 或 onCollectValidate...Antd Form 具有很好的灵活性,可以帮我们快速的实现表单需求,但是也存在一些问题,比如当表单的任何一个组件值发生改变,触发 onCollect 数据收集、执行更新流程,都会调用 forceUpdate

2.6K20

antd4与antd3Form表单设计区别

核心 antd3思想:使用HOC(高阶组件)包裹form表单,HOC组件的state存储所有的value值,定义设置值和获取值的方法 缺点:动一发牵全身,一个value值改变,因为这是顶级状态,所以所有的子组件都会因父组件的重新...render而render,浪费了性能 antd4思想:使用Context 包裹form表单,自定义一个store类,存储所有的表单value值,定义设置值和获取值得方法,因为不是组件内部状态,需要自己定义更新函数...({ children, form, onFinish, onFinishFill }, ref) { // 这里调用useForm,获取咱们定义的api, 函数组件会在父组件直接获取,这里传进去...error) => { onFinishFill(error) }) }}> {/* 利用context传咱们定义的...callback(null, this.state) } } // 高阶函数,包裹input给它实现双向绑定,跟state通讯,直接改变

1.9K20

三分钟迁移 antd@4

升级点 首先对我而言最大的改进在于性能,select ,table 和 tree 已经全面支持了虚拟滚动,作为了早早的使用了 rc-tree来解决性能问题的人,antd@4 中提供自然是更好不过了,毕竟自己写样式和动态是非常复杂的...重写的 table 和 from 解决很多遗留的疑难杂症,具体可以查看豆酱老师的 antd@4 系列文章[2],里面详细写了心路历程,在 form 我们不需要使用 getFieldDecorator...已 Pro 全区块为例,这两个方法分别出现了 87 和 22次,在我自己的一个维护项目中找到了142 个 getFieldDecorator ,更不用说为了封装组件 getFieldDecorator...使用方式如下 : yarn add umi-plugin-antd-icon-config -D 并且在 config.ts 设置 export default { plugins:[['umi-plugin-antd-icon-config...由于 4.0 的 icon 有一些删改,如果发现图标消失,请在 antd 官网寻找合适的进行替换。

1.8K30

React后台管理前端系统(基于开源框架开发)起步式

这个系统的搭建背景是这样的,有一个朋友想看到现有系统的一些,用户数据,新闻数据,只需要看到,短期不需要增删改功能,让我搭建一个简单的后台系统给他看.接到任务作为一个有四年开发经验的人来说这也太简单了吧...但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin.../routes/List/TableList我们看到 果然是我们要寻找的页面, 改一二个文字 刷新一下页面,果然改变了.好开心.第一步就这样完了....我们要对这个库或组件有个大致印象,比如我们要在页面修改antd 的Dropdown组件,就要去antd官文看看有那些参数可以调整.....then(res => { if (res.data.code === 0) { this.caseTypeList = res.data.data } }) 少年不要迷茫了,要接受改变

1.8K20
领券