Jason Chen Jason Chen - 4 months ago 110
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
{this.sendthru}
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
ref
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
el
in this situation?

Answer

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() {
this.refs.inputTitle.value="";
this.refs.inputEntry.value="";
}

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.