在react项目中使用antd的form组件,动态设置input框的值

问题：

创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了

原因：

点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。

解决办法：

不使用initialValue设置动态更新的值，而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值，就可以解决了。

if (result.code===0) {
  if (result.data) {
    this.props.form.setFieldsValue({name:result.data});
  }
}

ps：

还有一个问题，如果输入了账号进行搜索后匹配了name，也填入了input框中。但是又修改了账号，然后直接提交，就会导致账号和name不匹配，也就是name是存在的，但就不是对应的账号了。会导致保存之后，如果正确的账号和name已经存在，数据库出现数据存储问题。

解决：

给账号输入的Input框添加onChange事件，来触发如果有改变就清空name框，防止错误提交

change = (event) => {
 this.props.form.setFieldsValue({name:''});
}

记录一下

补充知识：重新封装Antd Input组件，解决中文输入问题

我就废话不多说了，大家还是直接看代码吧~

import React, { useState, useEffect } from 'react'
import { Input } from 'antd'
function BaseHOC(key) {
 return function(props) {
 const { defaultValue, value, onChange } = props
 const hasValue = props.hasOwnProperty('value')
 // 用户切换到底是显示 value 还是 input
 // 不能直接用 isOnComposition 原因是，这个值发生变化不会触发重新渲染
 // 不能只使用 flag 原因是，setFlag 是异步的
 const [flag, setFlag] = useState(false)
 // 非中文输入时候显示 value。中文输入的时候显示 input
 const [input, setInput] = useState(hasValue ? value : defaultValue)
 useEffect(
  function() {
  if (hasValue && input !== value) {
   setInput(value)
  }
  },
  [value]
 )
 let isOnComposition = false
 function handleChange(e) {
  setInput(e.target.value)
  if (isOnComposition) return
  onChange && onChange(e)
 }
 function handleComposition(e) {
  if ('compositionend' === e.type) {
  isOnComposition = false
  handleChange(e)
  } else {
  isOnComposition = true
  }
  if (flag !== isOnComposition) {
  setFlag(isOnComposition)
  }
 }
 let Component = Input
 if (key) {
  Component = Input[key]
 }
 return (
  <Component
  {...props}
  value={hasValue && !flag ? value : input}
  onCompositionStart={handleComposition}
  onCompositionUpdate={handleComposition}
  onCompositionEnd={handleComposition}
  onChange={handleChange}
  />
 )
 }
}

const Component = function(props) {
 return BaseHOC()(props)
}

Component.Search = function(props) {
 return BaseHOC('Search')(props)
}

Component.TextArea = function(props) {
 return BaseHOC('TextArea')(props)
}

Component.Password = Input.Password
Component.Group = Input.Group
export default Component

以上这篇在react项目中使用antd的form组件,动态设置input框的值就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解elementUI中input框无法输入的问题

    最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • ant-design-vue按需加载的坑的解决

    问题 在vue-cli4.x中按需加载ant-design-vue,在编译时报错,错误如下 原因 ant-design-vue使用less预处理器.在less3.0版本以前,javascriptEnabled属性默认为true,3.0以后默认为false.地址 目前项目中less版本为3.0.4,所以在编译中会报错 解决办法 第一种办法,在vue.config.js中添加如下配置 css: { loaderOptions: { less: { javascriptEnabled: true }

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • 如何在React项目中使用AntDesign

    如何在React项目中使用AntDesign

    目录 0.前言 1.AntDesign是什么? 2.AntDesign如何使用? 3.如何具体使用AntDdesign的组件 3-1.如何使用 antd 的Table组件 3-2.如何使用 antd 的Button组件 4.后续 0.前言 我们在后台管理系统React项目开发中会有Table表格.Form表单.List列表.Button按钮等组件,这个时候我们可以使用AntDesign来减少开发中不必要的样式问题. 1.AntDesign是什么? Ant Design 是一个 UI 设计语言,是

  • React如何利用Antd的Form组件实现表单功能详解

    React如何利用Antd的Form组件实现表单功能详解

    一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe

  • 详解对于React结合Antd的Form组件实现登录功能

    一.React 结合 Antd 实现登录功能 引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数

  • React项目中axios的封装与API接口的管理详解

    目录 前言 安装 引入 环境的切换 请求拦截 响应拦截 api的统一管理 总结 前言 在react项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.如果还对axios不了解的,可以移步axios文档. 安装 //使用npm安装 npm install axios; //使用yarn安装 yarn add axios 引入 在项目

  • React项目中hook实现展示对话框功能

    目录 思路:使用全局状态管理所有对话框 尝试设计一个API去做对话框的全局管理 实现:创建NiceModal组件和相关API 处理对话框的返回值 总结 React中使用对话框并不容易,主要因为: 对话框需要在父组件中声明,才能在子组件中控制其是否显示 给对话框传递参数只能由props传入,这意味着所有状态管理都必须在更高阶的组件中.而实际上这个对话框的参数只在子组件中才会维护.这时就需要我们使用自定义事件将参数传回 这些问题的本质就是:如何用一个统一的方式去管理对话框,从而让对话框相关的业务逻辑

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 优雅的在React项目中使用Redux的方法

    或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-

  • TypeScript在React项目中的使用实践总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具

  • react 项目中引入图片的几种方式

    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片 我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件,然后就可以直接写

随机推荐