react Input组件封装

React Input组件封装通常是指将基础的HTML `<input>` 元素包装进一个自定义的React组件中，以便提供更丰富的功能、样式管理和状态管理。这样做可以提高代码复用性和维护性。以下是创建一个简单的React Input封装示例：

import React, { useState } from 'react';

// 定义InputWrapper组件
const InputWrapper = ({ label, value, onChange, placeholder }) => {
  // 使用useState Hook来处理输入值的状态
  const [inputValue, setInputValue] = useState(value || '');

  // 当用户改变输入时触发的事件处理器
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
    onChange(inputValue); // 如果有onChange回调，传递新值给它
  };

  return (
    <div>
      {/* 创建标签 */}
      <label htmlFor="custom-input">{label}</label>

      {/* 创建输入框 */}
      <input
        type="text"
        id="custom-input"
        placeholder={placeholder}
        value={inputValue}
        onChange={handleInputChange}
      />
    </div>
  );
};

export default InputWrapper;

// 使用方式
<InputWrapper
  label="姓名"
  value=""
  onChange={(value) => console.log('新的输入值:', value)}
  placeholder="请输入您的姓名..."
/>