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

Question

我正在尝试根据用户输入显示月份名称。我有一个名为 Constants js 文件，其中定义了月份数组。 情况1: 当用户点击提交按钮在文本字段中输入 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

我收到此错误“TypeError:无法读取未定义的属性“目标””

Answer 1

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;