React中搭建输入框，提示词时遇到的问题，useState旧值，onBlur和onClick顺序问题

于 2024-06-12 15:13:31 发布
阅读量144 收藏
点赞数 2
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenc0518/article/details/139627480
版权

1.关于useState旧值，即上一次值得影响
 

解决办法：使用 useEffect 或者 useRef


2.onBlur onClick执行顺序问题

解决办法：1.使用onMouseDown替 代 onClick

                   2.使用setTimeout延缓执行后面失去焦点的操作(可能出现bug)

陈不知代码
关注
专栏目录
React实现一个带选择功能的输入框
08-23 1098
背景 遇到这样一个需求，在一个表单中实现一个带选择功能的输入框，既能输入又能选择。 开始 经过一番思考，有了一个初步的思路：使用Antd的下拉菜单和Input去做，页面加载的时候就去请求数据，然后在Input得到焦点的时候展开下拉菜单，失去焦点的时候收起菜单。 于是就写出了下面这样的代码: import { Form, Input, Menu } from 'antd' import P...
React+antd实现可编辑单元格，非官网写法，不使用可编辑行和form验证
six66667的博客
09-07 857
antd3以上的写法乍一看还挺复杂，自己写了个精简版。没用EditableRow+Cell的结构，也不使用Context、高阶组件等，不使用form验证。现在这个可编辑单元格组件在鼠标失焦或者回车后，列数据会变回修改前的数据，在state里面加个text，把最后显示的 {children} 换成 {text} 就可以。最后使用的时候直接在column元素的render里面 就好啦， props一定要传处理保存修改的方法。
AntDesign React 简单封装一个带错误提示的输入框
最新发布
殇尘的博客
05-13 520
我对这个动画结束再卸载的技术调研过一次，最终结论是他们都是依赖底层浏览器提供的动画事件。是的，浏览器原生就有相关的事件提供，比如你可以监听一个函数一次 CSS 动画什么时候结束。所以如果写原生 JS 的话，就是监听这个结束事件，在事件响应里面移除动画元素就行。说实话有点不友好，我就一个简单的输入框，想要用户输入时用正则校验，错误时提示一些错误信息。没想到官方没有提供纯粹的带错误提示的输入框，官方提供了启用错误样式。组件，它提供了六个动画相关的类来实现入场和退场动画，然后。，嗯感觉是个哲学问题。
React 中的 ref 如何操作 dom节点，使输入框获取焦点
wbskb的博客
09-03 1234
聚焦文字输入框：当用户点击按钮时，`handleClick` 函数会被调用，从而将焦点聚焦到文本输入框上。React 中的 ref 如何操作 dom节点，使输入框获取焦点
react中 input自动失去焦点解决办法和原因
GMLGDJ的博客
01-30 8017
react中 input自动失去焦点解决办法和原因 react 更新state时input失去焦点
记录react中input失去焦点
weixin_42260975的博客
08-26 2842
记录react中input失去焦点 小笔记记录~~~ ○( ＾皿＾)っHiahiahia… constructor(props){ super(props); this.state = { onBlur:false } } <div className="com"><span class...
React Hooks方式下富文本框失焦优化性能，判断内容是否改变
coco723的博客
01-22 587
class组件法的实现 传统Class方式下，很容易想到UNSAFE_componentWillUpdate，将nextProps与当前的props比较便可知道高度是否发生了变化 UNSAFE_componentWillUpdate(nextProps) { if (this.props.height && nextProps.height && this.props.height !== nextProps.height && ueditor .
react 事件1
08-08
在示例代码中，`handleChange`函数通过`console.log(event.target.value)`来打印输入框的当前值，这在处理表单输入时非常常见。 接下来，我们来了解一下HTML事件的分类： 1. **触摸类事件**：这类事件主要针对移动...
react中组件实例三大属性之一ref介绍以及用法
weixin_48952990的博客
08-09 1455
react中组件实例三大属性之一ref介绍以及用法
React - Input框绑定动态State和监听onChange事件，输入时失去焦点
Zong_0915的博客
05-10 696
方式一：就如上述案例一样，采用。
React+Antd项目，Form的Input中已经有内容，但是还是提示此项为必填项，不能为空
BigFamer的博客
08-26 4900
我们在进行数据采集功能开发的时候，往往会用到Form表单，这其中必不可少的就会用到Input（多种type类型）输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制，设置默认值和placehoder等等需求场景。我在使用React + Antd构建含有多个Input组件的Form表格时，遇到了下述问题…...
react 文本框警示
hjy1006154810的博客
12-07 1295
要求：1、字符串前后空格，自动删除前后空格并提交 2、字符串内全是空格或输入框为空时，红字弹出提示 效果： 代码： <ProFormText rules={[ { required: true, message: '请输入标签名称', }, { min: 2, message: '不少于2字符' }, { ...
【React教学】输入框自动完成提示——250行实现
weixin_34006965的博客
05-18 776
2019独角兽企业重金招聘Python工程师标准>>> ...
React判断输入框内容，弹出提示
wgod
07-04 3122
handleConfirmPassword = (rule, value, callback) => { const { getFieldValue } = this.props.form if (value && value !== getFieldValue('newPassword')) { callback('两...
react输入框监听获取值，写入state自动一一对应
qq_39047764的博客
07-11 3933
onChange={v=&gt;{this.handlechange("username",v)}} handlechange(key,val){        // console.log(key,val.target.value)        this.setState({            [key]:val.target.value   ---要小心这个值，有时候仅仅是val就够了 ...
ant-design输入框自动获取焦点
WebView
09-23 1万+
需求： 在做移动端项目时，引入Input输入框，当使用Input输入框的时候希望自动获取焦点，这样的话在移动端输入法就会自动弹起，方便用户使用。 实现： <Input ref={function (input) { if (input != null) { input.focus(); } }} /> ...
浅谈React实现输入框
筱葭的博客
04-25 6109
var data = { label: "Name", placeholder: "Please enter your name!", clearImg: "clear.png", regExp: /^\w{6,20}$/ }; var InputBox = React.createClass({ getInitialState: function() { return {input
ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景
Yukinoshita_kino的博客
08-23 5515
ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景。
react入门——实现一个输入框组件
热门推荐
hc1025808587的专栏
06-28 1万+
React组件化开发初试 按照官方文档和例程博客，实现了一个简单的输入框组件。 如果想了解官方案例，请参考深入理解 React 总结一下，一个简单的React.js应用应按照以下步骤构建： 设计组件原型和JSON API； 拆分用户界面为一个组件树； 利用React， 创建应用的一个静态版本； 识别出最小的（但是完整的）代表UI的state； 确认state的生命周期； 添加反向数据流。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值