受控组件

import React, { useState, useEffect } from 'react';
 
function CustomInput({ value, defaultValue = '', onChange, ...props }) {
  // 内部状态，用于非受控模式
  const [internalValue, setInternalValue] = useState(defaultValue);
 
  // 如果外部传入的 value 改变了，更新内部状态
  useEffect(() => {
    if (value !== undefined) {
      setInternalValue(value);
    }
  }, [value]);
 
  // 处理输入变化
  const handleChange = (event) => {
    const newValue = event.target.value;
 
    // 如果父组件传入了 onChange，调用父组件的 onChange
    if (onChange) {
      onChange(event); // 可以传递整个 event 对象，也可以传递 newValue
    }
 
    // 如果没有传入受控的 value，则更新内部状态
    if (value === undefined) {
      setInternalValue(newValue);
    }
  };
 
  return (
    <input
      {...props} // 传递其余的 props
      value={internalValue} // 使用内部或外部的值
      onChange={handleChange} // 绑定 handleChange
    />
  );
}
 
export default CustomInput;