[Solved]-reseting or clearing an input field with reactjs-Reactjs

score:6

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.

Shubham Khatri 247962

score:0

Just use:

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

Should do the trick

Samir K 91

score:1

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 = ''}

berrtech 320

[Solved]-reseting or clearing an input field with reactjs-Reactjs

Related Query

More Query from same tag