Javascript 根据用户输入显示月份

我试图根据用户输入显示月份名称。我有一个名为Constants js file的文件，其中我定义了我的月份数组。 案例1： 当用户点击submit按钮在文本字段中输入4时，应显示四月月份 案例2： 当用户输入33个月号时，应显示“无效月号”

Home JS file
<code>
import React, { Component }  from 'react';
import constants from './Constants';

class Home extends React.Component{
    constructor(props)
    {
        super(props);
        this.state ={
        value : ''
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (event) => 
    {
        this.setState({value: event.target.value})
    }

  render()
  {
    let newvalue = this.value;
     let latestvalue = constants.MONTHS[newvalue] == null ? 'invalid month' : constants.MONTHS[newvalue]  ; 
    return(
        <div className='home'>
        <h1>Welcome to my portfolio website</h1>
        Enter Month number <input type="text" value={this.state.value}/> 
        <button type="button" onSubmit={this.handleClick()}> </button>
        <p> Feel free to browse around and learn more about me.</p>
        Month is {latestvalue}
      </div>

     );
  }

}

export default Home;
</code>

Constants JS file

<code>

const constants = {

        MONTHS: ['','Jan','Feb','Mar','April','May','June','July']

}

export default constants;
</code>

It should display month or invalid month

---

我收到此错误类型错误：无法读取未定义的属性“target”

我认为您的错误是在常量上。MONTHS[newvalue]==null，因为数组的不可查找索引将返回Undefinedy您可以使用let latestvalue=常量一次性读取它。MONTHS[newvalue]| |“invalid month”我收到此错误，TypeError:无法读取undefinedRemove的属性“target”，请在Submit={this.handleClick}上移动括号。您正在调用handleClick方法，而不是附加它。好的，删除按钮上的onClick事件，并在输入上添加onChange={this.handleClick}。可能将handleClick更改为handleChange以进行澄清。这工作正常，但问题是当我在输入字段中动态输入它正在处理和显示时，我希望它仅在单击提交按钮时显示月份

import React, { Component }  from 'react';
import constants from './Constants';

class Home extends React.Component{
    constructor(props)
    {
        super(props);
        this.state ={
        value : 0,
        month: constants.MONTHS[0]
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (event) => 
    {
        this.setState({value: event.target.value})
    }
    handleSubmit = () => {
        const month = constants.MONTHS[this.state.value] || 'invalid month'
        this.setState({
        month: month
       })
    }

  render()
  {

    return(
        <div className='home'>
        <h1>Welcome to my portfolio website</h1>
        Enter Month number <input type="text" onChange={this.handleClick} value={this.state.value}/> 
        <button type="button" onSubmit={this.handleSubmit}> </button>
        <p> Feel free to browse around and learn more about me.</p>
        Month is {this.state.month}
      </div>

     );
  }

}

export default Home;