表单设置默认值_在React中使用表单

最新推荐文章于 2023-12-22 14:38:48 发布
最新推荐文章于 2023-12-22 14:38:48 发布
阅读量1.2k 收藏 1
点赞数
文章标签： 表单设置默认值
本文介绍了在React中处理表单的方法，包括受控和非受控元素的使用，以及如何设置默认值。受控元素通过绑定状态和onChange事件来保持数据一致性，而非受控元素则利用ref获取DOM元素的值。对于默认值，受控元素使用状态初始化，非受控元素使用defaultValue属性。同时，文章提出了对React JSX属性不可变性的疑问，指出在实际操作中属性绑定状态并更新是可以正常工作的。
摘要由CSDN通过智能技术生成

b2c6d639364bd8da70abd423a0934bbd.png

《快速上手React编程》CH7 在React中使用表单

React对于表单事件包了一层，优化了onChange等事件，比如以前DOM要失去焦点才会触发change事件，React是真的字面意义上change了就触发这个事件了。

React在表单上最大的特点在于，value它为了数据和视图的一致性，会按照表单元素的value值渲染属性，并一直保持一致，这就带来一个问题：如果用户手动往input里打了个字，因为表单元素里的value并没有被改变，所以这个input里的值不会改，视图里就是没反应。怎么办呢？

1、使用受控元素：

value绑定一个状态，然后在这个元素的onChange事件里setState这个状态，setState之前，还能对要设置的值进行校验，比如只要数字啦，可以把字母啥的剔除。onChange事件里的event.target.value可以拿到新的值。

class Content extends React.Component {
    
  constructor(props) {
    
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {
最低0.47元/天 解锁文章
weixin_39968801
关注
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
react获取表单form对象的两种方式，获取form后进行重置
吃瓜群众的博客
06-24 4376
1.函数组件 const [form] = Form.useForm(); useEffect(() => { form.setFieldsValue({...initialValues}); }, []) return <Form form={form} onFinish={ this.onFinish } onFinishFailed={ this.onFinishFailed } .
react中使用antd的表单重置数据
zoepriselife316的博客
08-19 9961
resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会重置为initialValue 使用： //这个事件，可以是click可以是生命周期函数，具体看需求 componentWillUnmount() { this.props.for...
react使用antd中Form内联组件与Form表单默认赋值
this_zq的博客
05-07 1806
先写思路：这里假设我写了两个Input组件，他们是一组，都在Form表单里面。然后我在通过initialValues给他们赋初始值。 一组Input组件的解决方案： 一组Input组件，这里直接转到官网教程： https://ant.design/components/form-cn/#header 看官网的代码直接套用即可 给一组Input组件赋初始值解决方案： 我这里使用了官网此处的方法赋值完后，发现表单验证是无法通过了，就过一夜的苦寻答案后，解决如下（在initialValues里.
vue和react中的表单默认值
xiaokangna的博客
09-07 3458
在react中设置input的默认值 defaultvalue= { 要设置的默认值 } <input type=“text” ref = { this.tes } defaultValue ={1}/> 默认值只在非受控组件中才设置，受控组件不生效，因为react中的受控组件的值是跟着vaule改变的 在vue中，设置input框的默认值 只需要value即可 < input value=“要设置的默认值”/> ...
react antd Form.List动态设置默认值
最新发布
Peter_Anna的博客
12-22 515
react antd Form.List动态设置默认值（select级联）
multi_step_form_react：使用本地存储React多步骤表单
02-04
项目中使用Material-UI可以快速构建出符合现代审美、具有一致性和可访问性的界面，包括表单组件，如输入框、按钮等。 5. **LocalStorage**：在多步骤表单中，使用LocalStorage可以保存用户在每一步填写的信息，防止...
使用React Context API在React中控制表单的简单方法-React开发
05-27
使用React Context API在React中控制表单的简单方法入门使用npm安装npm install --save formcat使用yarn yarn add formcat如何使用首先，我们需要一种在React中控制表单的简单方法使用React Context API入门使用npm...
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' ...
react-plexusform采用JSONSchema的react动态表单组件
08-15
React-Plexusform通过JSON-Schema实现了动态生成和验证React表单的功能，降低了表单开发的复杂度，提高了代码的可维护性和可扩展性。它为开发者提供了丰富的自定义选项和良好的社区支持，是构建复杂表单应用的理想...
react form.list设置默认值
qq_43987527的博客
12-15 3892
项目场景： 创建投票用到antd里的form.list 组件 新增一条 问题描述： 我在form.list 的一个formItem里有一个图片上传组件，我想上传完图片后把图片地址绑定到这个formItem上，之前我就用了 form.setFieldsValue({votingOptions:[subjectUrl:item?.response?.realUrl]}) 但是这么写完之后虽然图片的值是绑定上了，但是这个form.list里还有另外两个输入框，这两个控件的值会被重置 原因分析： 因为设置值
react antdesign中的Form.list的默认值问题解决方法
精通前端技术，了解后端接口
05-06 2125
添加和编辑用同一个Form.list表单默认值问题，来回切换并且改变此表单的默认展示几项
react 入坑学习（五）ANT table 设置默认选中行
JeffanChen的博客
07-23 2939
ANT table 设置默认选中行 查了一个上午，搜到的全是很久之前的checked,defaultChecked啥的全是很久之前的版本了，然后仔细看了看文档，（官网的服务器太差了，这几天老是访问不了） 现在改成了selectedRowKeys，且需要跟onchange一起用 const [defaultactionselectedtabledata, setdefaultactionselectedtabledata] = useState([]); //defaultselecteddata是你tabl
antd中：React为Form中的Radio和DatePicker设置初始值
比起未来可期，我更喜欢如约而至
08-20 4160
问题分析 需求：对表格一行部分数据进行修改，利用antd的Modal实现。 目的：将数据初始值体现在modal表单Form中。 动机：提高用户体验。 以下是待修改的表单Form。由图可知，原始数据没有体现在Form中。 解决方法 将每一条数据存在state中，每次点击表格不同行，调用setState更新数据。 查询官网和其他资料（链接见文末） 点击事件改变Modal的visible，从state中取出allowLateSubmission 和allowRepeatSubmission 利用setField
React-defaultValue设置默认值
weixin_44486539的博客
02-15 2818
在 react 中给 input 添加了 value 属性这个表单控件就会成为受控组件，如果不想成为受控组件又想设置默认的 value 值，可以通过 react 提供的 defaultValue 属性来设置 import React from 'react' import ReactDOM from 'react-dom' class CommentList extends React.Comp...
Redux-form中为field设置默认值initialvalue
M_Eve的博客
09-08 5502
尝试了很多种方法想要为field添加默认值，刚开始先使用了placeholder，但是并不能直接编辑，只能起到提示信息的作用，后来终于找到了解决办法，如下： import React, { Component } from 'react'; import { Field, reduxForm } from 'redux-form'; import { connect } from 'react-
react input 设置默认值
weixin_30639719的博客
08-29 2292
1、text类型 <input type="text" value={默认值} /> ,这种写法可以显示默认值，但不能对输入框进行编辑 正确写法: <input type="text" defaultValue={默认值} /> 2、checkbox类型 <input type="checkbox" checked />默认勾选，不能...
react设置默认props
热门推荐
马优晨
04-27 1万+
一般设置props的默认值有两种方式，下面通过一个例子说明一下。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;React表单&lt;/title&gt; &lt;script src="https://c
react项目 form表单重置 initialValue
qinyuhua93的博客
11-23 7671
项目中做了一个弹框，将新增和修改放到了同一个弹框，然后判断一个对象是否有值来判断是新增还是修改。 render() { const extra = ( &lt;Group&gt; &lt;Button onClick={this.handleAdd}&gt;新增&lt;/Button&gt; &lt;/Group&gt; ); ...
react form 设置默认值
06-06
在 React 中设置表单控件的默认值可以通过给表单控件的 `value` 属性或 `defaultValue` 属性设置初始值来实现。 例如，对于一个文本框，可以通过以下方式设置默认值： ```jsx <input type="text" value="默认值" /> ``` 或者： ```jsx <input type="text" defaultValue="默认值" /> ``` 对于一个下拉框，可以通过 `value` 属性来设置默认选中项： ```jsx <select value="option2"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` 需要注意的是，`defaultValue` 属性只在组件挂载时设置默认值，而 `value` 属性可以动态更新。如果需要动态更新默认值，应该使用 `value` 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值