React 开发一个自定义输入控件

Hull Qin

于 2021-06-18 23:07:06 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 React

本文链接：https://blog.youkuaiyun.com/kd_2015/article/details/118035278

在React开发中，Form.Item组件通常为子元素注入value和onChange属性以实现受控模式。为了兼容受控和非受控模式，可以创建一个自定义hook来封装通用逻辑。通过在组件中判断是否提供value属性，可以灵活地在两种模式间切换。然而，需要注意的是，一旦选定模式，不应在运行过程中相互转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常，Form.Item会给它的children注入两个属性：value和onChange，实现“受控模式”。
我们开发输入控件时，需要兼顾受控模式和非受控模式。
具体方案如下：

const MyInput = (props) => {
   
    // 重命名下prop传入的 value和onChange，减少歧义
    const {
   value: propValue, onChange: propOnChange, defaultValue} = props;
    // 判断初始时有无传入value，若非undefined则为受控组件
    const controlled = useMemo(() => 'value' in props, []);
    // 非受控模式，内部必须维护value的状态
    const [in