Clear an input field with Reactjs?

Declare value attribute for input tag (i.e value= {this.state.name}) and if you want to clear this input value you have to use this.setState({name : ''})

PFB working code for your reference :

<script type="text/babel">var StateComponent = React.createClass({resetName : function(event){this.setState({name : ''});},render : function(){return (<div><input type="text" value= {this.state.name}/><button onClick={this.resetName}>Reset</button></div>)}});ReactDOM.render(<StateComponent/>, document.getElementById('app'));</script>

I'm not really sure of the syntax {el => this.inputEntry = el}, but when clearing an input field you assign a ref like you mentioned.

<input type="text" ref="someName" />

Then in the onClick function after you've finished using the input value, just use...

this.refs.someName.value = '';

Edit

Actually the {el => this.inputEntry = el} is the same as this I believe. Maybe someone can correct me. The value for el must be getting passed in from somewhere, to act as the reference.

function (el) {this.inputEntry = el;}

I have a similar solution to @Satheesh using React hooks:

State initialization:

const [enteredText, setEnteredText] = useState(''); 

Input tag:

<input type="text" value={enteredText} (event handler, classNames, etc.) />

Inside the event handler function, after updating the object with data from input form, call:

setEnteredText('');

Note: This is described as 'two-way binding'

Now you can use the useRef hook to get some magic if you do not want to use the useState hook:

function MyComponent() {const inputRef = useRef(null);const onButtonClick = () => {// @ts-ignore (us this comment if typescript raises an error)inputRef.current.value = "";};return (<><input ref={inputRef} type="text" /><button onClick={onButtonClick}>Clear input</button></>);}

As I mentioned, if you are using useState that is the best way. I wanted to show you also this special approach.

You can use input type="reset"

<form action="/action_page.php">text: <input type="text" name="email" /><br /> <input type="reset" defaultValue="Reset" /> </form>

Also after React v 16.8+ you have an ability to use hooks

import React, {useState} from 'react';const ControlledInputs = () => {const [firstName, setFirstName] = useState(false);const handleSubmit = (e) => {e.preventDefault();if (firstName) {console.log('firstName :>> ', firstName);}};return (<><form onSubmit={handleSubmit}><label htmlFor="firstName">Name: </label><inputtype="text"id="firstName"name="firstName"value={firstName}onChange={(e) => setFirstName(e.target.value)}/><button type="submit">add person</button></form></>);};

You can use useState:

import React, { useState } from 'react';const [inputTitle, setInputTitle] = useState('');

then add value to your input component:

render() {<input type="text" onChange={(e) => setInputTitle(e.target.value)} value={inputTitle} /><button onClick={handleSubmit} type="submit">Submit</button>}

On your submit handler function:

setInputTitle('');document.querySelector('input').defaultValue = '';

I used the defaultValue property, useRef, and onClick to achieve this.

let ref = useRef()

and then inside the return:

<input type="text" defaultValue="bacon" ref={ref} onClick={() => ref.current.value = ""} />

also if you want to use onChange for the input it wouldn't require any more configuration and you can just use it. If you want to have a dynamic defaultValue then you absolutely can, with useState.

On the event of onClick

this.state={title:''}sendthru=()=>{document.getElementByid('inputname').value = '';this.setState({title:''})}

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

A simple way to reset the input in React is by implementing the onBlur inside the input.

onBlur={cleanSearch}

ej:

const [search, setSearch] = useState('')const handleSearch = ({target}) =>{setSearch(target.value)}const cleanSearch = () =>setSearch('')<inputplaceholder="Search…"inputProps={{ 'aria-label': 'search' }}value={search}onChange={handleSearch}onBlur={cleanSearch}/>

The way I cleared my form input values was to add an id to my form tag.Then when I handleSubmit I call this.clearForm()

In the clearForm function I then use document.getElementById("myForm").reset();

import React, {Component } from 'react';import './App.css';import Button from './components/Button';import Input from './components/Input';class App extends Component { state = {item: "", list: []}componentDidMount() {this.clearForm();}handleFormSubmit = event => {this.clearForm()event.preventDefault()const item = this.state.itemthis.setState ({list: [...this.state.list, item],})}handleInputChange = event => {this.setState ({item: event.target.value })}clearForm = () => {document.getElementById("myForm").reset(); this.setState({item: ""})}render() {return (<form id="myForm"><Inputname="textinfo"onChange={this.handleInputChange}value={this.state.item}/><ButtononClick={this.handleFormSubmit}> </Button></form>);}}export default App;