从0封装一个input组件

好的，让我们开始从头编写一个简单的Input组件。

首先，我们需要创建一个React组件。在组件中，我们可以使用`useState`来跟踪输入值。我们还需要一个回调函数（onChange）来更新输入值。

import React, { useState } from 'react';

function Input(props) {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
    if (props.onChange) {
      props.onChange(event.target.value);
    }
  }

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}

export default Input;

现在我们有了一个基本的Input组件，它可以渲染一个文本输入框并且更新它的值。

我们可以在父组件中使用这个Input组件：

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

function App() {
  const [name, setName] = useState('');

  const handleNameChange = (value) => {
    setName(value);
  }

  return (
    <div>
      <Input onChange={handleNameChange} />
      <p>Hello, {name}!</p>
    </div>
  );
}

export default App;

这样我们就可以在页面上看到一个输入框，当我们输入内容时，它会更新下方的文本。