CODEWITHSUNDEEP
javascriptreactjs
user1177860
user1177860

Reputation: 509

reseting or clearing an input field with reactjs

I having the following problem.

I have a react component which does a filter search on a list which is fine, but I want to clear the input field with a button, if i add a value attribute to the input field which I can set in the setState but then it stops the onChange from working as it does the filter search on the list:

I've created the following but this still doesn't work.

<input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" onChange={this.handleChange} />

<button className="uk-button uk-width-1-1" onClick="React.findDOMNode(this.refs.form).reset()"><i className="uk-icon-undo"></i></button>

Upvotes: 2

Views: 20906

Answers (3)

Samir K
Samir K

Reputation: 91

Just use: 

this.refs.form.getInputNode().value = '';

Should do the trick

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 282000

set the value to empty as 

handleClick = () => {
        ReactDOM.findDOMNode(this.refs.form).value = "";
      }

and yes onClick expects a function or a value not a string. Also React.findDOMNode() is deprecated. You should use ReactDOM.findDOMNode();

  
class Hello extends React.Component {
  handleChange = (e) => {
  
  }
  handleClick = () => {
    ReactDOM.findDOMNode(this.refs.form).value = "";
  }
  render() {
    
    return (
      <div>
      <input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" onChange={this.handleChange} />

<button className="uk-button uk-width-1-1" onClick={this.handleClick}><i className="uk-icon-undo"></i>click</button>
      </div>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>

Also Its a better idea to use state and change the state for input value.

as

class Hello extends React.Component {
  constructor() {
    super() 
      this.state = {
        valueAttr : ''
      
    }
  }
  handleChange = (e) => {
    this.setState({valueAttr: e.target.value});
  }
  handleClick = () => {
    this.setState({valueAttr: ''})
  }
  render() {
    
    return (
      <div>
      <input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" value = {this.state.valueAttr} onChange={this.handleChange} />

<button className="uk-button uk-width-1-1" onClick={this.handleClick}><i className="uk-icon-undo"></i>click</button>
      </div>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>

I personally prefer the second approach. But you can do it in whichever way you feel comfortable.

Upvotes: 6

berrtech
berrtech

Reputation: 328

Here onClick="React.findDOMNode(this.refs.form).reset()" you are assigning string to onClick value of button, not a function, if you want to assign a function it should look like onClick={React.findDOMNode(this.refs.form).reset}" or onClick={() => React.findDOMNode(this.refs.form).reset()}

Next, if i recall correctly, findDOMNode is deprecated in React, so you should use ReactDOM for this.

And last, I doubt there is reset method present, so I think you should try mutating input value directly.

Try this

onClick={() => this.refs.form.value = ''}

Upvotes: 1

Related Questions