Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) React Component Patterns Refs and the DOM

Posted by Luis Onate
Luis Onate
1,522 Points

Input resetting without having to call e.currentTarget.reset(). Is that normal?

The input is resetting without a call to e.currentTarget.reset(). Is that behavior expected?

class AddPlayerForm extends Component {

    playerInput = React.createRef();

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.addPlayer(this.playerInput.current.value);
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text"
                    ref={this.playerInput}
                    placeholder="Enter a player's name"
                />
                <input 
                    type="submit" 
                    value="Add Player" 
                />
            </form>
        );
    }
}

1 Answer

cnl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
cnl
Full Stack JavaScript Techdegree Graduate 20,423 Points
cnl
.a{fill-rule:evenodd;}techdegree seal-36
cnl
Full Stack JavaScript Techdegree Graduate 20,423 Points

Noticed this too, but after refreshing the page (hard refresh with "Command" + "Shift" + "R") it did not repeat the behavior and resetting the currentTarget was needed.