受控组件中defaultValue随state值变更问题及校验需求

要实现对比输入值与默认值的校验逻辑时，会遇到一个问题：当通过state设置输入框的值时，defaultValue会随之同步变更，无法保留初始的默认值。

解决办法是通过ref来获取并留存初始默认值，同时获取当前输入值，以此完成校验逻辑。

受控组件问题示例 #

以下是出现问题的受控组件代码，这里同时设置了value和defaultValue，导致defaultValue会随着state的更新而变化：

const [value, setValue] = useState('helo')

<form onChange={e => console.log(e)}>
  <input
    defaultValue={5}
    value={value}
    onChange={e => {
      const format = () => {};
      setValue(format(e.target.value))
    }}
  />
</form>

非受控组件正常表现示例 #

在非受控组件中，defaultValue的表现符合预期，只会作为初始值，不会随输入变化而变更：

<form onChange={e => console.log(e)}>
  <input defaultValue={5} />
</form>

内容的提问来源于stack exchange，提问作者Riky Andreas