react 基于 hooks 实现受控组件双向绑定

在React中，可以使用自定义useControlled Hook来实现受控组件的双向绑定。以下是一个简单的实现示例：

import React, { useState } from 'react';
 
function useControlled({ defaultValue, value, onChange }) {
  const [innerValue, setInnerValue] = useState(defaultValue);
 
  const handleChange = (event) => {
    const newValue = event.target.value;
    setInnerValue(newValue);
    if (onChange) {
      onChange(newValue);
    }
  };
 
  const controlledValue = value === undefined ? innerValue : value;
 
  return {
    value: controlledValue,
    onChange: handleChange
  };
}
 
function ControlledInput({ defaultValue, value, onChange }) {
  const { value: inputValue, onChange: handleInputChange } = useControlled({ defaultValue, value, onChange });
 
  return <input value={inputValue} onChange={handleInputChange} />;
}
 
export default ControlledInput;

在这个示例中，ControlledInput组件接收defaultValue和value属性，这两个属性都是用于定义输入框的默认值的。onChange属性是一个在值改变时被调用的回调函数，它接收新的值作为参数。

useControlled Hook 负责处理内部状态和值变更的逻辑。如果value属性未定义，则使用内部状态innerValue作为输入框的值，否则使用value属性的值。无论哪种情况，handleChange方法都会更新状态，并且如果提供了onChange属性，也会调用它。这样，ControlledInput组件就可以同时支持受控和非受控的用法。