antd的前置标签input框，需要使用到form的双向数据绑定

最新推荐文章于 2024-08-10 07:24:12 发布
最新推荐文章于 2024-08-10 07:24:12 发布
阅读量2k 收藏
点赞数
分类专栏： antd+react的情景 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42779387/article/details/107689768
版权
这篇博客探讨了在antd框架下，如何处理输入框input的双向数据绑定问题，特别是针对select组件与queryType参数的绑定。通过使用getFieldDecorator进行配置，并结合useState管理状态，确保在发送请求时能正确传递queryType。
摘要由CSDN通过智能技术生成

问题描述：

在这里插入图片描述
这种input框需要两个双向数据绑定的参数，
在这里插入图片描述
在这里插入图片描述
select的数据如何绑定给queryType？？？？

解决方法如下：

1.将select标签配置与form表单类似的，使用getFieldDecorator，绑定
在这里插入图片描述
2.将select结合useState使用，然后需要在发送请求的getTeacherList中把queryType穿进去。
在这里插入图片描述
在这里插入图片描述

Alin.Lee
关注
专栏目录
dva中使用antd Form经验总结
teemology的博客
06-03 3926
dva中使用antd Form经验总结创建表单验证自定义表单验证表单提交常用表单组件InputTextArea：富文本框ButtonSelectTreeSelectCascaderDatePicker和RangePickerRadio 创建 引入form后先初始化form import { Form } from 'antd'; @Form.create() export default clas...
在react项目中使用antd的form组件,动态设置input框的值
01-18
问题： 创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了 原因： 点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用initialValue设置动态更新的值，而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值，就可以解决了。 if (result.code===0) { if (result.data) { this.
关于antd表单的双向绑定
张致豪
11-16 1万+
公司使用antd+mobx进行开发，在使用表单的绑定时出现问题 const objToForm = (obj)=>{ let target = {} for(let [key,value] of Object.entries(obj)){ target[key] = Form.createFormField({value}) } return target } cons...
使用 `react-tagsinput` 的教程
最新发布
gitblog_01032的博客
08-10 244
使用 react-tagsinput 的教程 react-tagsinputHighly customizable React component for inputing tags.项目地址:https://gitcode.com/gh_mirrors/re/react-tagsinput 1. 项目目录结构及介绍 在 react-tagsinput 项目中，常见的目录结构可能如下： ├── ...
【React+AntD】3、时隔多年之后绑定文本框与 state 中的值(双向数据绑定)
BMG-Princess
09-25 594
在 Vue 中，默认提供了 v-model 指令，可以很方便的实现 数据的双向绑定； 但是，在 React 中没有双向数据绑定指令，也就是 只能把 state 上的数据绑定到 页面，无法把 页面中数据的变化，自动同步回 state ； 如果需要把 页面上数据的变化，保存到 state，则需要程序员手动监听文本框的 onChange 事件，拿到最新的数据，手动调用 this.setState({ }) 更改回去； 写法一： 页面的UI结构： <input value=..
react antd Input 绑定值
datouniao1的博客
09-13 1859
在页面上做一些搜索条件，为了方便我们可以做一个按钮"置空"，或者清除，点击这个按钮实现将输入框中的值删除，在以前的html页面中我们很方便通过js来将值制空，但是react组件封装的很严重了，我们没有办法通过js来制空，即使可以实现也是比较麻烦的
a-input前后输入框添加/ /(符号)
qq_46617584的博客
05-30 465
【代码】a-input前后输入框添加/ /(符号)
Ant Design Vue组件，a-select标签
h360583690的博客
07-16 1937
Ant Design Vue组件，a-select标签
# AntD中数据校验方式分类整理
DoubleJan的博客
11-11 1636
一 概述 这篇文章主要整理了我在近期工作中，所使用Form表单组件，并进行数据校验的心得。整理出来了三种主要的校验需求，分类梳理了开发思路和方法，以及部分Form表单使用的注意事项。 这三种分类为： 数据联动 单一数据校验 多数据联动校验 二 数据联动 有时候我们表单中的某一个控件的值可能会在别的控件中使用，或者，我们需要对输入值格式化。 举个例子，加入我们需要做一个新增档案的功能，某种事物的...
读读antd源码之数据录入组件
ershing的博客
05-22 953
① 获取用户数据的关键组件 antd中的数据录入组件，其实就是表单类组件，作为web服务获取用户输入数据的重要组件，必须考虑到其操作易用、前置校验、状态提示、风格统一等交互特性。 纵观了antd这里的一系列数据录入组件，抛开设计的角度，从技术来看，这里最重要的且复用最高的还是前面文章《读读antd源码之导航组件》提到的rc-trigger，就是提供动作监听弹出浮层的组件，基本大多数数据录入组件都会用到。 而其他的组件，基本看抽出来的组件库react-component就可以了。 ② 一些基础组件
React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
CRPER
11-13 2238
前言 最近把新的后台系统写好了…用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了… 仔细梳理了下上个系统,发现可以抽离的东西不少 有兴趣的瞧瞧,没兴趣的止步,节约您的时间… 效果图 响应式传入 折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 ...
【vue3】10.跟着官网学习vue3-表单输入绑定，双向绑定，封装input组件，封装ant-design-vue的input组件
qq_17335549的博客
09-06 3806
跟着官网学习vue3-表单输入绑定，双向绑定，封装input组件，封装ant-design-vue的input组件
vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】
XSL_HR的博客
12-30 1万+
vue3 antd项目实战——Form表单提交、校验、重置功能【v-model双向绑定input输入框、form表单数据，动态校验规则】
React中的双向数据绑定之input
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
06-12 9959
React中的双向数据绑定之input 主要是通过状态管理进行的双向数据绑定 将input中的value与state进行绑定，修改input的同时触发修改state，然后更新全局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
react的input双向数据绑定
weixin_38547641的博客
08-17 653
import React from 'react' export default class BindThis extends React.Component { constructor(props) { super(props) this.state = { msg: 'hello' } } render() { return <div> <h1&gt
react input输入值进行绑定
ferrysoul的博客
04-13 3135
import React, { Component } from 'react' import '../App.css' //A其实就是一个简单的高阶组件 export default (title) => WrappedComponent => class A extends Component { refc(instance) {//instance指的是Wrapp...
react项目中使用antd的form组件，动态设置input框的值
热门推荐
赵乘风_i
09-14 3万+
问题： 创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了 原因： 点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用initialValue设置动态更新的值，而是使用 this....
React 学习——Ant Design input回显之后值改变绑定
a_feihu的博客
06-14 970
React 学习——Ant Design input回显之后值改变绑定
reactjs antd 实现双向数据绑定的form表单
05-05
在 React 和 Ant Design 中实现双向数据绑定的表单，可以使用受控组件的方式，即通过 state 来控制表单的值。在 Ant Design 中，可以使用 Form 组件来实现表单的布局、校验等功能。 以下是一个简单的实现示例： ``` import { Form, Input, Button } from 'antd'; import { useState } from 'react'; const DemoForm = () => { const [form] = Form.useForm(); const [formData, setFormData] = useState({ name: '', age: '' }); // 表单值改变回调 const onFormChange = (changedValues, allValues) => { setFormData(allValues); }; // 提交表单回调 const onSubmit = () => { console.log(formData); }; return ( <Form form={form} onValuesChange={onFormChange} initialValues={formData} > <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]} > <Input /> </Form.Item> <Form.Item label="年龄" name="age" rules={[{ required: true, message: '请输入年龄' }]} > <Input /> </Form.Item> <Form.Item> <Button type="primary" onClick={onSubmit}>提交</Button> </Form.Item> </Form> ); }; export default DemoForm; ``` 上面的示例中，通过 useState 来定义 formData 状态，用于存储表单的数据。同时，使用 Form 组件来渲染表单，通过 onValuesChange 回调来实时更新 formData 数据。在提交表单时，可以通过 formData 取到表单的数据进行处理。注意，需要使用 Form.useForm() 来获取 form 对象并传递给 Form 组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值