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

最新推荐文章于 2024-07-11 18:12:21 发布

原创

最新推荐文章于 2024-07-11 18:12:21 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

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

通常，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 [innerValue