精华内容
下载资源
问答
  • 补充知识:react中使用antd表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Function([names: string[]]) 注:initialValue有值时会
  • react使用antd表单赋值,用于修改弹框 1、使用getFieldDecorator的initialValue 2、在state里定义一个变量存表格的数据 3、给打开弹框的方法传个record 4、把表格里的值存到state 5、把在state里存的值传给弹框 ...

    react使用antd表单赋值,用于修改弹框

    1、使用getFieldDecorator的initialValue

    在这里插入图片描述

    2、在state里定义一个变量存表格的数据

    在这里插入图片描述

    3、给打开弹框的方法传个record

    在这里插入图片描述

    4、把表格里的值存到state

    在这里插入图片描述

    5、把在state里存的值传给弹框

    在这里插入图片描述

    6、获取传过来的值

    在这里插入图片描述

    7、在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值

    在这里插入图片描述
    在这里插入图片描述

    7、OK在这里插入图片描述

    展开全文
  • 使用 antd 做表格回显数据时,会看到文档有写: 所以我们可以 1.定义hooks const [form] = Form.useForm(); 2.在触发事件中使用,以打开模态框赋值为例 const showModal = () => { setIsModalVisible...

    使用 antd 做表格回显数据时,会看到文档有写:

     所以我们可以

    1.定义hooks

    const [form] = Form.useForm();

    2.在触发事件中使用,以打开模态框赋值为例

    const showModal = () => {
        setIsModalVisible(true);
        form.setFieldsValue("表格数据")   //对象形式(user:{data})
      }; 

    3.Form 要加上我们定义的 form

    <Form
      form={form}                      //form
      name="dynamic_form_nest_item"
      onFinish={onFinish}
    >
      <Form.Item
        name={["user", "name"]}
        label="name"
        rules={[{ required: "提示" }]}
      >
        <Input />
      </Form.Item>

    展开全文
  • 实际的业务中,用户进入页面之后 下拉框是 没有值的,当用户 做一些操作之后 主动给 下拉框赋值 (相当于数据回显的作用) 并不是 主动去 选择下拉框 <Form.Item label="Gender"> {getFieldDecorator('gender',...

    实际的业务中,用户进入页面之后 下拉框是 没有值的,当用户 做一些操作之后 主动给 下拉框赋值 (相当于数据回显的作用)
    并不是 主动去 选择下拉框

    <Form.Item label="Gender">
            {getFieldDecorator('gender', {
              rules: [{ required: true, message: 'Please select your gender!' }],
            })(
              <Select
                placeholder="Select a option and change input text above"
                onChange={this.handleSelectChange}
              >
                <Option value="male">male</Option>
                <Option value="female">female</Option>
              </Select>,
            )}
          </Form.Item>
    

    通过setFieldsValue 来进行主动赋值

     this.props.form.setFieldsValue({
          gender: `male`,
        });
    

    关注我 持续更新前端知识

    展开全文
  • <p><img alt="" height="863" src=...////有没有什么简便的方法直接给表单的控件赋值,不用把表单所有的控件都列出来</code></pre>  </p>
  • 1、antd中给弹窗中的表单赋值报错信息: 翻译:在呈现与值关联的字段之前,不能设置窗体字段。您可以使用getFieldDecorator(id,options)而不是v-decorator=“[id,options]”在渲染之前注册它。 2、弹窗内容为子...
    1、antd中给弹窗中的表单赋值报错信息:

    在这里插入图片描述
    翻译:在呈现与值关联的字段之前,不能设置窗体字段。您可以使用getFieldDecorator(id,options)而不是v-decorator=“[id,options]”在渲染之前注册它。

    2、弹窗内容为子组件,代码:
    父组件:
    <!-- 复核窗口 -->
    <a-modal
      v-model="showCheck"
      title="复核"
      @ok="handleCheckOk"
      @cancel="handleCancel"
      :width="668"
      :confirm-loading="confirmLoading"
    >
      <check-mod
        ref="checkModal"
        :siteTypeList="siteTypeList"
      >
      </check-mod>
    </a-modal>
    js
    // 点击复核按钮
    handleCheck(item) {
      let checkData = {...item}
      this.checkId = checkData.id
      this.showCheck = true
      // 调用子组件中赋值的方法
      this.$nextTick(() => {
        this.$refs.checkModal.setValues(checkData);
      });
    }
    
    子组件:
    setValues(value) {
      console.log(value)
      this.values  = value
      if(this.values) {
        let inspectionTime
        inspectionTime = this.values.inspectionTime
        this.form.setFieldsValue({
          inspectionTime,
          ...this.values
        })
      }
    }
    
    3、解决方法1:指定赋值,即表单中需要赋值一 一 赋值
    setValues(value) {
      console.log(value)
      this.values  = value
      if(this.values) {
        let inspectionTime
        inspectionTime = this.values.inspectionTime
        this.form.setFieldsValue({
          inspectionTime,
          stationCode: this.values.stationCode,
          stationName: this.values.stationName,
          stationAddress: this.values.stationAddress,
          stationTypeName: this.values.stationTypeName,
          orderType: this.values.stationType,
          faultType: this.values.faultType,
          maintainMode: this.values.maintainMode,
          opeDetails: this.values.opeDetails,
          maintainMeasures: this.values.maintainMeasures,
          reviewRecord: this.values.reviewRecord,
          fraction: this.values.fraction
        })
      }
    }
    

    如果表单项有很多,一 一赋值那就很麻烦了,所以

    4、解决方法2:判断旧对象
    setValues(value) {
      let formData = this.form.getFieldsValue();
      // 循环表单数据
      for (let i in formData) {
        // 判断传来的对象的每个属性是否有值或者为0,给新对象每个属性赋值
        this.values[i] = value[i] || value[i] == 0 ? value[i] : undefined;
        // 判断新对象每个属性的值是否为字符串
        typeof this.values[i] == "string" ?
          (this.values[i] = this.values[i].replace(/(^\s*)|(\s*$)/g, "")) :
          "";
      }
      // 给表单赋值
      this.form.setFieldsValue({
        ...this.values,
      });
    }
    
    5、原因分析:setFieldsValue里面有表单没有的字段 导致报错,解决思路:通过定义一个新对象,循环表单的每个属性,在传来的数据对象value对象中,一一对应上表单的属性,把属性和值都给到新对象;简介的说:就是表单的所有项都给到一个新对象,而且新对象的值都来自于传值对象,最后用新对象去给表单赋值,这样就不会因为赋多或者赋少而导致的报错了!
    6、如果使用了方法2还是报错,那就使用this.$nextTick()回调(或者延迟触发)
    1、使用this.$nextTick()
    
    // 获取到的原对象(用来渲染的数据对象)
    let infoData = value.swDeviceInstall;
    let formData;
    let infoValues = {};
    this.$nextTick(() => {
      // 获取到表单的对象
      formData = this.infoForm.getFieldsValue();
      // 循环表单对象属性
      for (let i in formData) {
        // 渲染表单项,获取到每个属性,通过原对象对应表单每个属性的值,如果有值则给infoValues对象对应的属性赋值,否则赋值undefined
        infoValues[i] = infoData[i] || infoData[i] == 0 ? infoData[i] : undefined;
        // 判断infoValues对象的每个属性是否为字符串, 如果为字符串则去掉前后空格(0个或多个),否则为空字符串
        typeof infoValues[i] == "string" ?
          (infoValues[i] = infoValues[i].replace(/(^\s*)|(\s*$)/g, "")) :
          "";
      };
      this.infoForm.setFieldsValue({
        ...infoValues,
        communicationMode: !infoData.communicationMode
          ? undefined
          : infoData.communicationMode.split(","),
        devPowerSupply: !infoData.devPowerSupply
          ? undefined
          : infoData.devPowerSupply.split(","),
        fixedType: !infoData.fixedType
          ? undefined
          : infoData.fixedType.split(",")
      });
    })
    
    2、使用定时器
    
    clearTimeout(timer)
    var timer = setTimeout(() => {
      formData = this.infoForm.getFieldsValue();
      for (let i in formData) {
        infoValues[i] = infoData[i] || infoData[i] == 0 ? infoData[i] : undefined;
        typeof infoValues[i] == "string" ?
          (infoValues[i] = infoValues[i].replace(/(^\s*)|(\s*$)/g, "")) :
          "";
      };
      this.infoForm.setFieldsValue({
        ...infoValues,
        communicationMode: !infoData.communicationMode
          ? undefined
          : infoData.communicationMode.split(","),
        devPowerSupply: !infoData.devPowerSupply
          ? undefined
          : infoData.devPowerSupply.split(","),
        fixedType: !infoData.fixedType
          ? undefined
          : infoData.fixedType.split(",")
      });
    }, 200);
    
    7、replace(/(^\s*)|(\s*$)/g, “”) 不理解的朋友们请往这边走https://blog.csdn.net/shenjun1992722/article/details/49895203
    8、遇到日期组件的朋友可能还会有报错(如图),请看另一篇文章>(正在测试中…)>(加班中…)>目的地

    在这里插入图片描述

    天天给自己一个微笑,种下每天的阳光!

    展开全文
  • antd表单 datepicker赋值 日期格式化

    千次阅读 2021-04-02 10:35:19
    直接复制 报错 warning.js?2149:7 Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `null` instead. <a-date-picker v-model="form.date" type=...
  • 我们推荐使用 Form.useForm 创建表单数据域进行控制。如果是在 class component 下,你也可以通过 ref 获取数据域。 创建表单 export default class SolidTest extends React.Component { constructor() { super...
  • 最近开发过程中遇到 antd form 表单赋值不上 查阅文档得知;需要setFieldsValue 和 createRef() 结合起来使用 1.创建createRef() export default class HomeIdenx extends Component { constructor(props) { super...
  • decorator值‘) 全部表单清空 this.form.resetFields() 赋值某一个表单 this.form.setFieldsValue({ 要赋值表单绑定的v-decorator值: 要附的值}) 赋值某一个表单 变量值 this.form.setFieldsValue( { [数组 这个填...
  • 方法一: getFieldDecorator没有第三个参数,如果写了3个参数就会出错 错误代码: <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
  • Antd: 需求 根据选择获取对应值,并将该值回显到表单的输入框中。 解决方法 首先使用createRef()获取form formRef = React.createRef() 然后再Form表单上绑定该formRef <Form name="normal_login" className=...
  • Ant Design Vue给a-form表单赋值及获取表单数据

    万次阅读 多人点赞 2020-08-24 17:24:41
    下面是form表单内的文本输入框,使用了v-decorate进行数据绑定: <a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>
  • Antd,FormModel,赋值没有重新验证Antd,FormModel,赋值没有重新验证 Antd,FormModel,赋值没有重新验证 习惯了表单元素的值发生改变后,会自动触发表单的验证,但是今天,它不验证了!好家伙。 这个输入框有些...
  • ant.design form表单提交+表单赋值

    千次阅读 2020-05-14 10:10:21
    场景:index.js上有三个form表单组件分别是,A.js B.js C.js 点击index.js上的提交/保存按钮,提交子组件form表单的值 1.在index父组件上使用create创建form const { form } = this.props; const { ...
  • antd Modal 里面嵌套form 表单赋值问题

    千次阅读 2020-07-10 11:25:53
    点击编辑弹出modal 模态框 , 为 FormItem赋值 initialValue, 当点击下一条表格的编辑时, FormItem内的值始终不变, 不能动态改变。 原因: 当我们第一次点开Modal的时候, FormItem会得到一个initialValue,但是这...
  • 我就废话不多说了,大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' ...
  • 今天在From组件中使用From.Item给开关组件Switch和Checkbox赋值不生效,查看官网看到一条 意思是,如果你要给一个非value值作为组件值的时候,需要添加一个valuePropName的属性,指定你要赋值给那个属性。 事例...
  • 用setTimeout设置一个延时
  • 这里先说一下v-decorator指令:v-decorator下面是form表单内的文本输入框,使用了v-decorate进行数据绑定:这个是v-decorate的用法,类似于v-model,但是v-decorator可以更方便的添加校验,必填项等;v-model可以更...
  • 先写思路:这里假设我写了两个Input组件,他们是一组,都在Form表单里面。...我这里使用了官网此处的方法赋值完后,发现表单验证是无法通过了,就过一夜的苦寻答案后,解决如下(在initialValues里.
  • antd的form表单4.0

    2020-12-23 03:25:26
    记得2019年antd还没有跟新form,就在三月末我自己做一个管理系统,虽然是公司内部的系统但是产品那个人很烦,对样式要求很高,我就照着设计稿搭了框架做了,既然是后台系统就短不了form表单,说起form表单就想到了...
  • antd form表单默认值

    2021-11-01 10:11:40
    以下是antd的官方表述表单 Form - Ant Design 你不能用控件的value或defaultValue等属性来设置表单域的值,默认值可以用 Form 里的initialValues来设置。注意initialValues不能被setState动态更新,你需要用setFi...
  • antd表单编辑时,校验失效

    千次阅读 2020-05-21 11:05:28
    提交表单时需要组织表单的默认行为。 handleSubmit = (e) => { e.preventDefault(); ...... } 最近遇到的一个坑,记录一下。
  • antd表单提交的基本使用

    千次阅读 2020-12-23 03:25:30
    import { Form, Input, Button } from 'antd';import PropTypes from 'prop-types';const FormItem = Form.Item;class Forgot extends React.PureComponent {render() {const { getFieldDecorator } = this.props.fo...
  • antd 表单验证的3种写法

    千次阅读 2019-07-09 19:43:03
    AntDesign Form表单字段校验的三种方式 1.使用getFieldDecorator的rules规则 最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则,message为校验不通过时的提示文字。 {...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 951
精华内容 380
关键字:

antd表单赋值