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

通常，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, setInnerValue] = useState(defaultValue);
    // 重新定义value和onChange，组件内部引用
    const value = controlled ? propValue : innerValue;
    const onChange = (newValue) => {
        // 无论是否受控，都应该触发prop传入的onChange
        propOnChange && propOnChange(newValue);
        // 只有非受控模式，才需要更新内部的state
        !controlled && setInnerValue(newValue);
    };
    // 组件内部引用value和onChange
    return (
        <Input value={value} onChange={onChange} />
    );
};

考虑到逻辑通用性，封装为hook：

const useValueOnchange = (props) => {
    const {value: propValue, onChange: propOnChange, defaultValue} = props;
    const controlled = useMemo(() => 'value' in props, []);
    const [innerValue, setInnerValue] = useState(defaultValue);
    const value = controlled ? propValue : innerValue;
    const onChange = (newValue) => {
        propOnChange && propOnChange(newValue);
        !controlled && setInnerValue(newValue);
    };
    return [value, onChange];
};

于是，封装自己的组件时：

const MyInput = (props) => {
    const [value, onChange] = useValueOnchange(props);
    return (
        <Input value={value} onChange={onChange} />
    );
};