React JS根据用户输入显示月份

import React, { Component } from 'react';

class MonthDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: '',
      month: ''
    };
  }

  handleInputChange = (event) => {
    this.setState({ userInput: event.target.value });
  }

  showMonth = () => {
    const userInput = parseInt(this.state.userInput);
    if (!isNaN(userInput) && userInput >= 1 && userInput <= 12) {
      const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      const month = monthNames[userInput - 1];
      this.setState({ month });
    } else {
      this.setState({ month: 'Invalid input' });
    }
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.userInput} onChange={this.handleInputChange} />
        <button onClick={this.showMonth}>Show Month</button>
        <div>{this.state.month}</div>
      </div>
    );
  }
}

export default MonthDisplay;