Реагируйте JS, чтобы отобразить месяц на основе ввода пользователя - PullRequest
Новая
       9

Реагируйте JS, чтобы отобразить месяц на основе ввода пользователя

0 голосов
/ 09 февраля 2019

Я пытаюсь отобразить название месяца на основе ввода пользователя.У меня есть файл с именем Constants js file, в котором я определил свой массив месяцев.случай 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

Я получаю этоошибка "Ошибка типа: невозможно прочитать свойство 'target' из неопределенного"

1 Ответ

0 голосов
/ 09 февраля 2019 
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;
...