@ant-design/react-native中关于TextAreaItem的计数功能 —count

最新推荐文章于 2021-11-03 17:21:59 发布
最新推荐文章于 2021-11-03 17:21:59 发布
阅读量3.1k 收藏 1
点赞数 1
分类专栏： 学习笔记 文章标签： @ant-design/react-native TextAreaItem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44557421/article/details/91407250
版权

@ant-design/react-native中关于TextAreaItem的计数功能 —count

这两天在项目中遇到一个问需求在这里插入图片描述
当用户点击上图中的标签时，多行输入文本中就会相应的添加的文字

然鹅！

现实情况是这样子的
在这里插入图片描述
可以看到count指数并没有跟随着改变

这里是我的代码

这里使用的是@ant-design/react-native中的TextAreaItem
在这里插入图片描述
我并没有使用defaultValue，而是用state关联value，onChange时也会改变state

可以看到这种方法并没有成功。

随后我在antd的源码里找到了这一段代码

最低0.47元/天 解锁文章
首席外科戴夫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react-reacttextareaautosize能够根据内容自动扩展的Reacttextarea组件
08-15
react-textarea-autosize - 能够根据内容自动扩展的React textarea组件
ant-design-mobile-rn：用于React Native的Ant设计
02-01
English |蚂蚁设计移动RN 可配置的...pod installyarn ios # or yarn android安装与使用$ npm install @ant-design/react-native --save 要么yarn add @ant-design/react-native安装对等依赖项（4.0.0+） npm inst
如何实现textarea剩余字数统计效果
CS之路
12-27 839
如何实现textarea剩余字数统计效果  
react-native Text组件接受的最大中文字数9256 超出9256渲染不出文本
hzxOnlineOk的博客
08-28 509
今天碰到了一个奇葩的问题 RN的Text组件最多只能接受并且渲染 出9256个中文文字，超出这个范围，虽然高度仍旧起效果，但是在IOS模拟器上无法渲染出文本 如何解决 只截取9256位文本，剩余的用省略号...替换 ...
angularjs textarea 剩余字数统计
abgo98357的博客
02-08 334
写页面的过程中用到了textarea的文本域，就突然想起他也可以加上剩余字数统计的这个功能。 第一个思路： 根据键盘按键按下去触发一个方法计数： <textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></text...
textarea字符计数
三里小龙
11-16 944
思路：文本框中内容输入包括单字节字符（英文、数字等）和双字节字符（中文字符等），这就使得字符计数时需要考虑两种不同的情况来分别处理。还有就是对文本框事件监听处理，如keyup、keydown、onchange等，要根据需要选择要监听的事件，否则会发生紊乱。具体实现如下： ---------------------------------------------------------------...
ant-design-charts:一个React图库
03-19
$ npm install @ant-design/charts 用法 import React from 'react' ; import { Line } from '@ant-design/charts' ; const Page : React . FC = ( ) => { const data = [ { year : '1991' , value : 3 } , { ...
react-native-geolocation：React Native的地理位置API
02-03
@react-native-community/geolocation Geolocation API扩展了。 当前，在Android上，它使用 。 Google不推荐使用此API，因为它不如推荐的准确和慢。 这是我们希望在不久的将来更改的内容 。 为了将新的与React ...
material-tailwind:@ material-tailwind是用于Tailwind CSS和Material Design的易于使用的组件库。 它具有多个React组件，全部使用Tailwind CSS类和Material Design指南编写。 即将推出VueJS，Angular等更多组件。 将此存储库添加到您的监视列表中以获取最新新闻，或加入我们的新闻通讯社区
03-30
它具有多个React组件，全部使用Tailwind CSS类和Material Design指南编写。 即将推出VueJS，Angular等更多组件。 将此存储库添加到您的监视列表中以获取最新新闻，或加入我们的新闻通讯社区： : 。 目录 成分 快速...
td-design:雷数科技前端部门组件库工具库
07-23
td-design 雷数科技前端部门组件库/工具库 ...ReactJS + React Native + Typescript + umiJS + React Hooks + Jest + Monorepo + ... 主要组成 项目搭建脚手架 PC端业务组件库 APP端业务组件库 辅助工具库 文档库
react-textarea-counter：基本的textarea字符计数器React组件
02-21
react-textarea-counter 基本textarea字符计数器React组件。 安装 npm i react-textarea-counter --save 基本用法 import React from 'react' ; import TextareaCounter from 'react-textarea-counter' ; export default ( ) => { return < TextareaCounter xss=removed xss=removed> ; } ; 道具 财产 类型 默认 描述 showCount bool true 如果要显示或隐藏计数器。 countLimit number 25 计数器上的最大字符数。 countDirection string a
随笔——文本域（计数方式：已输入/可再输入）
weixin_44268707的博客
12-21 762
样式： .text-area_box { position: relative; .ant-input { height: 121px; background: #ffffff; border: 1px solid #d9d9d9; border-radius: 3px; } .word_number { position: absolute; bottom: -2
antd中TextArea限制十个字符但是表单获取到11个字符的问题及解决方案
程展威的博客
11-03 1417
一、如何限制TextArea输入个数 正常情况下我们限制TextArea的输入个数，只需要在标签里面输入maxLength={10}便可以限制只能输入10个字符了 二、问题出现的场景 因为结合了formItem使用，所以将TextArea放到了FormItem里面，但是由于ui要求需要实现如下布局： 所以我再TextArea的外面包了一层div，然后问题就出来了，虽然TextArea里面还是限制输入10个字符，但是通过form.validateFields（）拿到antd里的form表单后发现竟然拿到了11
React Native系列之-React.js介绍
_StriveG的专栏
10-06 1524
由于React Native是拿React.js来开发的，那么我们就需要了解下React.js，并学习下React.js的语法 。 以下内容为官网介绍： React是Facebook推出的一个用来构建用户界面的JavaScript库。具备以下特性： 1.仅仅是UI，在使用React的时候，许多人仅仅是当做MVC的V层。 2.虚拟DOM（virtual DOM），Rea
antd 文本域超长问题_基于分割思想的文本检测算法
weixin_39717029的博客
10-26 264
本文使用 Zhihu On VSCode 创作并发布在文本检测任务中，较少出现字符重合的情况（重合的字符人也认不出来啊），所以基于分割思想的文本检测算法也能得到很好的效果。1. 使用人工特征文本检测领域常见的人工特征算法有两种：SWT和MSER，这些方法的效率比滑窗法更高，精度也更好。SWT算法思路：图片中的文本都具有一致宽度的线条。其计算步骤如下：计算梯度图；在梯度图中寻找梯度方向相反的边缘像素...
React textarea自适应文字高度伸缩 超简单版
hao像飘在外太空的博客
05-31 5667
亲测可用const Header = React.createClass({ onEdit(){ //关键是先设置为auto，目的为了重设高度（如果字数减少） this.refs.myTA.style.height = 'auto'; //如果高度不够，再重新设置 if(this.refs.myTA.scrollHeight
react antd-mobile 获取 TextareaItem的值报错
无缺的博客
08-20 2719
import {TextareaItem, InputItem, Button, Flex, SearchBar} from 'antd-mobile'; class leavMessage extends Component { constructor(props){ super(props); Util.setTitle("关于我们"); this.stat...
textarea的maxlength属性字数不一致
DlongZ的博客
12-10 783
关于textarea的maxlength属性 现象： s前端textarea文本框允许最大输入512个字符，默认一直输入到其无发在输入文字为止，可是，当在textarea输入框中输入2个及以上换行符时，文本框居然可以允许多输入两个字符，因而导致了文本存入数据库时保存失败。 原因： 对于textarea中包含的回车符，默认会被保存为’\r’，’\n’两个字符。但是对于前端maxlength的判断计数...
Antd-mobile UI库基础教程
06-03
针对React框架打造的移动端UI组件库，讲解细致，适用于初学者，快速上手实战操作，应对企业级开发
yarn命令 如何更换 @monaco-editor/react版本？ @monaco-editor/react哪个版本稳定？
最新发布
07-14
要更换 `@monaco-editor/react` 的版本，你可以以下 `yarn` 命令： ``` yarn upgrade @monaco-editor/react@<版本号> ``` 将 `<版本号>` 替换为你想要使用的具体版本号。运行该命令后，`yarn` 将会尝试升级 `@monaco-editor/react` 到指定的版本。 至于哪个版本的 `@monaco-editor/react` 是稳定的，你可以参考它的发布记录（changelog）或者官方文档中的版本说明。通常来说，较新的版本会包含 bug 修复和功能改进，但也可能会引入新的问题。因此，你可以根据你项目的需求和其他依赖项的兼容性来选择一个合适的稳定版本。 你可以查看 `@monaco-editor/react` 的官方 GitHub 仓库或者 npm 包页面来获取更多关于不同版本的信息和稳定性评估。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值