封装一个input组件

好的，以下是一个简单的input组件的封装：

import React from 'react';

const Input = ({ label, onChange, value, type = 'text', placeholder = '' }) => {
  return (
    <div>
      <label htmlFor={label}>{label}</label>
      <input
        id={label}
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
};

export default Input;

这个组件接受5个props：

- label：输入框的标签名称
- onChange：输入框的onChange事件处理函数
- value：输入框的值
- type：输入框的类型，默认为'text'
- placeholder：输入框的占位符，默认为空字符串

使用这个组件只需要在父组件中引入它并传递对应的props即可：

import React, { useState } from 'react';
import Input from './Input';

const App = () => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (value) => {
    setInputValue(value);
  };

  return (
    <div>
      <Input label="用户名" value={inputValue} onChange={handleInputChange} />
      <Input label="密码" value={inputValue} onChange={handleInputChange} type="password" />
    </div>
  );
};

export default App;

这里定义了一个App组件，在里面使用了两个Input组件，并传递了不同的props。