当前位置: 首页 > 工具软件 > InputDefault > 使用案例 >

记一下在react中input通过defaultValue绑定值输入之后切换绑定值不更新问题

龙学
2023-12-01

在react中通过input的defaultValue绑定的值是可以输入的,但是输入之后,切换绑定的值,通过e.target
可以看到input标签上的value绑定值时发生改变的,但是页面不更新
这里可以使用react中的ref来绑定值
首先通过

const TemplateNameInput:any=React.createRef()

创建ref(在ts中是需要声明类型的,不然在input中ref会报红)
在input中

 <input ref={TemplateNameInput} onBlur={(e) => blurInpUpData(e.target.value, '模板名称')}  type="text" />

绑定ref
给绑定的量绑定一个useEffect

useEffect(() => {
        if(TemplateNameInput.current){
            TemplateDescribeInput.current.value=Details.description
    }   
    }, [Details])

在这个useEffect中必须要加if判断,因为刚进来的时候TemplateDescribeInput还没有绑定到相应的input框,但是useEffect这个函数钢筋页面会默认调用一次,他的第二个参数如果为[]则进页面只调用一次。
如果[]中写了一个量,则当这个量改变的时候,这个函数就会执行,这个量发生改变,重新给input框赋值

 类似资料: