在泛型组件中呈现输入组件的简单方法

import React, { Component } from 'react';

// 定义一个高阶组件
const withInput = (InputComponent) => {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      };
    }

    handleChange = (e) => {
      this.setState({
        value: e.target.value,
      });
    }

    render() {
      return (
        <div>
          <label>{this.props.label}</label>
          <InputComponent
            value={this.state.value}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  };
};

// 定义一个输入组件
const TextInput = ({ value, onChange }) => (
  <input type="text" value={value} onChange={onChange} />
);

// 使用高阶组件包装输入组件
const InputWithLabel = withInput(TextInput);

// 使用InputWithLabel组件
const App = () => (
  <div>
    <InputWithLabel label="Username" />
    <InputWithLabel label="Password" />
  </div>
);

export default App;