关于 React 中使用 input，输入之后失焦问题解决方案

最新推荐文章于 2024-06-25 16:24:30 发布

vileman

最新推荐文章于 2024-06-25 16:24:30 发布

阅读量1.2k

点赞数 1

分类专栏： React 实战问题文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/vileman/article/details/126726609

版权

React 实战问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.出现问题代码(demo)

import React, { useState } from "react";

const All = ()=>{

    const [aValue, setAValue] = useState('')

    const A = ()=>{
        return (
            <div>
                <input
                    value={aValue}
                    onInput={(e)=>{
                       e.persist()
                       setAValue(e.target.value)
                    }}
                />
            </div>
        )
    }

    return (
        <div>
            <A />
        </div>
    )
}

export default All;

2.解决方案

import React, { useState } from "react";

const All = ()=>{

    const [aValue, setAValue] = useState('')

    const a = ()=>{
        return (
            <div>
                <input
                    value={aValue}
                    onInput={(e)=>{
                       e.persist()
                       setAValue(e.target.value)
                    }}
                />
            </div>
        )
    }

    return (
        <div>
            {
               a()
            }
        </div>
    )
}

export default All;

3.解决说明

因为我以前是用 VUE 开发的，React 还不是很熟，看一些大佬说，出现这个问题是嵌套高级组件，嵌套内组件刷新 React 触发 render 会重新计算组件相关的 key，导致前后两者不一致，我的修改从标签引用变成函数式引用，可能是让 React 计算高级组件的嵌套变成了，高级组件内部逻辑的判断，不过这些都还只是我的猜测，后续有时间会去看一下源码，给出答案