Jason Chen Jason Chen - 1 year ago 300
React JSX Question

Clear an input field with Reactjs?

I am using a variable below.

var newInput = {
title: this.inputTitle.value,
entry: this.inputEntry.value

This is used by my input fields.

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control"></textarea>
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

Once I activate
I want to clear my input fields. However, I am uncertain how to do so.

Also, as shown in this example, it was pointed out to me that I should use the
property for input values. What I am unclear of is what exactly does it mean to have
{el => this.inputEntry = el}
. What is the significance of
in this situation?

Answer Source

Let me assume that you have done the 'this' binding of 'sendThru' function.

The below functions clears the input fields when the method is triggered.

sendThru() {

refs can be written as inline function expression as shown here. ref={el => this.inputTitle = el} where el refers to the component.

when refs are written like above, React sees a different function object each time so on every update, ref will be called with null immediately before it's called with the component instance.

Read more about it here.