智能网站建设策划微信app下载安装官方版2023

        在 React 中，defaultChecked/checked 和 defaultValue/value 是用于处理表单元素初始值和受控值的属性对。区别在于表单元素是否受 React 组件状态控制。

1. defaultValue

• 作用：设置表单元素的初始值（仅在首次渲染时生效）。
• 特点：
  • 只在组件首次挂载时生效，后续状态变化不会影响它。
  • 适用于非受控组件。

import React from 'react';function UncontrolledInput() {return (<div><input type="text" defaultValue="Initial value" /></div>);
}export default UncontrolledInput;

输入框首次渲染时会显示 "Initial value"，但后续用户输入不会通过 React 状态管理。

2. value

• 作用：控制表单元素的当前值（受 React 状态控制）。
• 特点：
  • 必须与 onChange 事件处理程序一起使用，以更新 React 状态。
  • 适用于受控组件。

import React, { useState } from 'react';function ControlledInput() {const [inputValue, setInputValue] = useState('');return (<div><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/></div>);
}export default ControlledInput;

 输入框的值由 inputValue 状态控制，用户输入会通过 onChange 更新状态。

3.总结 

属性对	适用场景	是否受 React 状态控制	是否需要 onChange
defaultChecked	非受控组件（初始值）	否	否
checked	受控组件	是	是
defaultValue	非受控组件（初始值）	否	否
value	受控组件	是	是