使用5个输入文本创建react原生组件的正确方法

import React, { useState } from 'react';

// 类组件
class TextInputComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textInputs: ['', '', '', '', ''],
    };
  }

  handleInputChange = (index, event) => {
    const { value } = event.target;
    this.setState((prevState) => {
      const textInputs = [...prevState.textInputs];
      textInputs[index] = value;
      return { textInputs };
    });
  };

  render() {
    const { textInputs } = this.state;
    return (
      <div>
        {textInputs.map((value, index) => (
          <input
            key={index}
            type="text"
            value={value}
            onChange={(event) => this.handleInputChange(index, event)}
          />
        ))}
      </div>
    );
  }
}

// 函数组件
const TextInputComponent = () => {
  const [textInputs, setTextInputs] = useState(['', '', '', '', '']);

  const handleInputChange = (index, event) => {
    const { value } = event.target;
    setTextInputs((prevTextInputs) => {
      const updatedTextInputs = [...prevTextInputs];
      updatedTextInputs[index] = value;
      return updatedTextInputs;
    });
  };

  return (
    <div>
      {textInputs.map((value, index) => (
        <input
          key={index}
          type="text"
          value={value}
          onChange={(event) => handleInputChange(index, event)}
        />
      ))}
    </div>
  );
};