react input的defaultValue不会变化

最新推荐文章于 2023-06-15 17:55:55 发布
最新推荐文章于 2023-06-15 17:55:55 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42881588/article/details/124406364
版权

第一次遇到input的defaultValue不会变化，或者只记录前一次的数据，后面的数据不会及时更新，而value是不能改变input的值的

解决办法就是给父级的div或者form添加一个可变的key值 key={String(row.id) +String(Date.now())}

<div>
	<TextArea  key={String(row.id) +String(Date.now())} defaultValue={row.remark} onBlur={this.updateRemarkInfo.bind(this, row.id, this.state.coll_id)} autoSize />
</div>
黑色小米粥
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React Input无法修改value
风清扬道场
03-26 3569
对于react老手来说 这种问题非常容易解决，但是百度上一直没有一个好的解决方案。尤其是最新的reacthook写法资源相当稀少，很多东西都要自己去琢磨 const [InputValue,setInputValue] = useState('') return ( <> // 这里的input用的是ant-design的UI库 所以是大写 但是写法就类似于这一种 <Input value={InputValue} onChange={(event) => { set
React input defaultValue不会更新状态怎么办？
专注基础架构领域
12-28 1567
解决这个问题的方法是改变key输入，代码如下： <input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.onTextChange} defaultValue={awayMessageText} /> 应该是react的bug吧，反正问题是解决了。 ...
React andDesign Input赋值defaultValue不生效
最新发布
weixin_58031521的博客
06-15 409
react中使用antDesign没有双向绑定，Input组件需要配合使用defaultValue来模拟数据反选操作。直接使用发现并未生效。解决方式：给input增加key值，保证唯一。
记一下在react中input通过defaultValue绑定值输入之后切换绑定值不更新问题
weixin_57011137的博客
10-09 1304
在react中通过input的defaultValue绑定的值是可以输入的，但是输入之后，切换绑定的值，通过e.target 可以看到input标签上的value绑定值时发生改变的，但是页面不更新 这里可以使用react中的ref来绑定值 首先通过 const TemplateNameInput:any=React.createRef() 创建ref（在ts中是需要声明类型的，不然在input中ref会报红） 在input中 <input ref={TemplateNameInput} onBlu
react Input 的defaultValue不随着state变化
wangweiscsdn的博客
08-24 4041
第一次遇到input的defaultValue不会变化，或者只记录前一次的数据，后面的数据不会及时更新，而value是不能改变input的值的 解决办法就是给父级的div或者form添加一个可变的key值 class TeacherInfoWidget extends React.Component{ render(){ const {onChange,teacherInfo,No
关于reactinput框设置了value值之后不能根据state值进行更新
Benz_s600的博客
04-28 3321
前言：相信小伙伴在使用react.js的过程中，会碰到这种情况，state的值更新了，input框的value值没有更新。因为我们设置的属性是defaultValue={number}，这种可以实现手动编辑，但是不会随着state值变化而更新，我们将属性更改为value={number}之后，发现又没办法输入了，这个时候需要使用input的onChange方法去更新 1.在代码中使用input框 ...
React input输入相关：受控方式无法更新对象类型数据（函数式组件 useState）
qq_51574759的博客
12-29 750
这个问题的关键其实我们都知道：**state不能通过直接赋值的方式修改，这也是我们为什么要解构出setUserInfo的原因** 到这里你可能很疑惑，我是用的`setUserInfo`呀？ 但是看上面传入`setUserInfo`中的函数，传入函数是为了解决需要用到之前的state值的需求，这个`pre`就是之前的 state，可是在这个函数中，却直接使用了`pre.account = e.target.value`这样的形式，**用 = 给一个 state 赋值了！** 既要获取之前的state值，
ant-design-vue的form表单直接用：defaultValue不生效
weixin_30902675的博客
04-24 2041
　　最近开始用ant-design-vue，跟vue项目中的语法没什么不一样，不过今天发现：defaultValue不生效。 　　一般用：defaultValue是想先占用input，后续可能需要改变input中的值（用：value一般是不希望变input中的值）。 　　下面是不生效写法： 　　<a-input :defaultValue="text"/> 　　这种写法...
react-otp-input:用于React的OTP输入组件
04-28
安装要安装最新的稳定版本： npm install --save react-otp-input基本用法： import React , { Component } from 'react' ;import OtpInput from 'react-otp-input' ;export default class App extends Component { ...
react-circular-input:React组件以轻松组成圆形范围输入
05-07
npm i react-circular-input 例子 import { CircularInput , CircularTrack , CircularProgress , CircularThumb } from 'react-circular-input' export default ( ) => { const [ value , setValue ] = ...
在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.
浅谈react受控组件与非受控组件(小结)
11-26
这是因为在React中，`defaultValue`只会在组件首次渲染时设置一次，之后的值改变不会受到影响。如果想要动态更新输入框的值，应该使用受控组件的方式，通过`value`和`onChange`来控制输入框的状态。 总的来说，受控...
input之怎么清除默认值
10-30
<input name="username" type="text" value="first name.last name" size="15" maxlength="60" onfocus="if (value==defaultValue)value='' " onblur="if(!value)value=defaultValue"> ``` 在上面的代码中，我们使用...
react-native-segmented-text-input：邪恶的可自定义用于React Native。 对于标签，拼写检查等有用
02-06
React Native的一个可自定义的<TextInput>。 对于标签，拼写检查等有用。 :rocket: 入门 使用 ： npm install --save react-native-segmented-text-input :writing_hand_selector: 用法 import ...
React 动态数据绑定修改对应的input框更新对应的文本内容
周家大小姐
03-24 4957
需求:以下的输入框我修改哪个,哪个对应的文本内容及时更新 子组件: const person = (props) =>{ return( <div className="footer"> <p onClick={props.presonHandler}>我的名字叫{props.name}</p> &l...
在控制台，如何修改react项目的表单中输入框的值
时光留不住，毕竟东流去
10-13 1213
在控制台，如何修改react项目的表单中输入框的值
React 无状态组件更新组件内的value值
banana_1120的博客
07-04 329
React 无状态组件更新组件内的value值
关于使用antd-desgin-vue中的input框defaultvalue 不生效解决办法
Benz_s600的博客
09-10 3131
前言：使用antd-desgin-vue ui框架的时候，用到了input这个组件，想做的功能是一个编辑信息的一个回显，可以使用了input的defaultvalue属性，并没有生效 解决办法： 具体为啥子喃！要问楼主啦
React input的value报错
weixin_40670909的博客
03-29 416
A component is changing a controlled input of type %s to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncont...
react input
05-05
React中的`<input>`组件可以用于创建用户输入表单元素，例如文本框、单选框、复选框、下拉框等。以下是一个简单的使用示例： ``` import React, { useState } from 'react'; function InputExample() { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } return ( <div> <input type="text" value={value} onChange={handleChange} /> <p>You entered: {value}</p> </div> ); } export default InputExample; ``` 在这个示例中，我们定义了一个名为`InputExample`的组件，它包含一个文本框和一个显示用户输入的段落。我们使用`useState`钩子来定义一个名为`value`的状态变量，它保存文本框中的值。我们还定义了一个名为`handleChange`的函数，它用于更新`value`状态变量。 在`<input>`元素中，我们使用`type="text"`属性来指定输入框类型为文本框。我们还使用`value`属性将`value`状态变量的值绑定到输入框中。最后，我们使用`onChange`事件处理程序来调用`handleChange`函数，以便在用户输入时更新`value`状态变量。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值