[React.js] Trouble with onSubmit via /r/learnprogramming


[React.js] Trouble with onSubmit

Hi all,

I'm having trouble with onSubmit in a form. The trouble is that I'm getting back a proxy object, such that event.target.value returns undefined. Yet, the onChange event handler returns a string with a number for event.target.value. What I'm trying to do is have handleSubmit kick off the setInterval countdown, which it does just fine, but also set the state for countdownTime for whatever value was submitted.

Any help would be greatly appreciated! I'm super new to coding, and I've been banging me head against this all day.

I'm not sure how to get a working example with codepen, so here's the bare code I'm struggling with:

import React, { Component } from 'react';

class Pomodoro extends Component { constructor(){ super() this.state = { countdownTime: 25, intervalID: null } }

handleSubmit (event){ event.preventDefault() this.setState({ intervalID: setInterval(this.updateValue.bind(this), 1000)}) }

updateValue(){ if(this.state.countdownTime === 0){clearInterval(this.state.intervalID) } else { this.setState({countdownTime: this.state.countdownTime – 1}) } }

handleChange(event){ this.setState({countdownTime: Number(event.target.value)}) }

render(){ return(

{this.state.countdownTime}

<form onSubmit={this.handleSubmit.bind(this)}> <input type='number' defaultValue='25' onChange={this.handleChange.bind(this)} /> </form> </div>) } }

export default Pomodoro;

Submitted July 14, 2017 at 05:47PM by aaronBoop
via reddit http://ift.tt/2v1qgir

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s