踩坑实录 - react中input属性value和defaultValue的使用

踩坑还原

• 在react项目开发过程中使用了input表单元素，承载了【手动输入】以及【点击按钮改变值】的两个功能需求。当时使用的是input中的defaultValue属性，发现只有手动修改生效了，点击按钮改值未生效。

解决这个问题前，得先了解一下React受控和非受控组件

受控和非受控组件

• 受控组件

  1. 概念

  在react中，可变状态通常保存在组件状态属性中，并且只能通过useState()来更新，用户输入时通过onChange()改变其值。这种由react控制的输入表单元素而改变其值的方式，称为受控组件

  2. 流程（更新state）

  • 通过初始化state中设置表单元素的默认值
  • 表单值发生改变时，调用onChange事件
  • 事件处理器通过event对象拿到改变后的值，并更新组件的state
  • 通过setState更新state，触发视图的重新渲染，完成表单组件的更新

  3. 案例

import React, { useState } from 'react'

const Dashboard = (props) => {
    const [ inputValue, setInputValue ] = useState('defaultValue')

    const inputChangeValue = (e) => {
        console.log('value ---------- ', e.target.value);
        setInputValue(e.target.value)
    }
    return (
        <div>
            <input type='text' value={inputValue} onChange={inputChangeValue}/>
        </div>
    )
}
export default Dashboard

【注意】

- react中的数据时单向流动的，也就是`单向数据绑定`。借助 input表单元素来理解这个 ‘单向数据绑定’

<input type='text' value={inputValue} onChange={inputChangeValue}/>
<input type='text' value={inputDefaultValue}/>

react中，input通过value属性去渲染值，当值发生改变时，必须在onChange中通过useState改变值，然后引发组件的重新渲染（`整个过程完成了数据双向绑定`）
第二个input手动输入不会重新渲染

---------------------------- 分割线 ----------------------------

vue通过v-model实现了数据的双向绑定
<input v-model={inputValue} />

• 非受控组件

  1. 概念

  表单数据由DOM元素本身处理，不接受setState的控制。（与传统的html表单输入相似，input输入值即为最新显示值，实质为操作DOM）【非受控组件中可以使用ref来操作dom】

  2. 流程

  • 输入框输入后，点击提交按钮，通过this.inputRef获取input的DOM属性信息

  3. 案例

import React, { useState, useRef } from 'react'

const Dashboard = (props) => {
    const [ inputDefaultValue, setInputDefaultValue ] = useState('哈哈哈')

    const inputRef = useRef()

    const changeValue = () => {
        console.log('input的值 -- ', inputRef.current.value);
    }

    return (
        <div>
            <input type='text' defaultValue={inputDefaultValue} ref={inputRef}/>
            <button onClick={changeValue}>提交</button>
        </div>
    )
}
export default Dashboard