Target undefined React.js, fetch data lesson

Question

Im following 30 days of react, day 16: https://www.fullstackreact.com/30-days-of-react/day-16/

Having it localy I have this error whenever I make any changes to form or time zone:

TypeError: Cannot read property 'target' of undefined

TimeForm._changeMsg
C:\Users\user\Desktop\predica-react\src\TimeForm.js:28

  25 |  }
  26 | 
  27 |  _changeMsg(evt) {
> 28 |    const msg =
  29 |      encodeURIComponent(evt.target.value).replace(/%20/, '+');
  30 |    this.setState({msg}, this._handleChange);
  31 |  }

Also there were wrong bindings in Timeform.js(threw errow) I've set them to

this._handleFormSubmit = this._handleFormSubmit.bind(this);
this._changeMsg = this._changeMsg.bind(this);
this._changeTimezone = this._changeMsg.bind(this);
this._handleChange = this._changeMsg.bind(this);

Apart from that everything is exactly as writen in the tutorial.

What should I do to make it work?

Edit1: Here is the requested jsx code(Timeform.js):

return (
  <form onSubmit={this._handleFormSubmit}>
    <select
      onChange={this._changeTimezone}
      defaultValue={tz}>
      {timezones.map(t => {
        return (<option key={t} value={t}>{t}</option>)
      })}
    </select>
    <input
      type="text"
      placeholder="A chronic string message (such as 7 hours from now)"
      onChange={this._changeMsg}
    />
    <input
      type="submit"
      value="Update request"
    />
  </form>
)

Edit2: I've cloned official repo and it appears to have no bindings at all in timezome.js and it works https://github.com/fullstackreact/30-days-of-react/tree/master/day-16

Edit3: The bindings are there, but moved from constructor to jsx.

Answer 1

我要做的就是将绑定从构造函数移动到jsx，并关闭大小写。