How to clear data in textbox in reactjs

Question

how to clear data in textbox in reactjs? After submit of the form I want to clear all the data as well as on click of cancel button. Can anyone help please ?

//Create Form
  onSubmit(e){
    e.preventDefault();
      if(this.handleValidation()){
      alert("Form submit");
     }
  }

  //Cancel Form
  onCancel(e){
    e.preventDefault();
    alert("Cancel");
  //  e.target.reset();
}


<button type="submit" className="btn btn-success active" onClick={this.onSubmit}><b>Create</b></button>
<button type="button" className="btn btn-warning"><b>Preview</b></button>
<button type="button" className="btn btn-danger" onClick={this.onCancel}><b>Cancel</b></button>

VIJAYABAL DHANAPAL · Accepted Answer · 2017-11-11 17:45:02Z

2

Get all input field in state, after reset state with help of setState() function.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

</head>
<body>
<div id="input"></div>
<script type="text/babel">
    var FormField = React.createClass({
        getInitialState: function(){
            return {
              name:"Vijayabal"
            }
          },
        resetData : function(){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value = {this.state.name}/>
                    <button onClick = {this.resetData}>Submit</button>
                </div>
            )
        }
    });
    ReactDOM.render(<FormField/>, document.getElementById('input'));
</script>
</body>
</html>

edited Nov 11, 2017 at 17:45

answered Nov 11, 2017 at 17:03

VIJAYABAL DHANAPAL

5642 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Riya Kapuria Over a year ago

Cannot read property 'setState' of undefined >>this error I'm getting

VIJAYABAL DHANAPAL Over a year ago

Have you set this.state with value name in constructor method?

Riya Kapuria Over a year ago

constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); }

Rick Jolly · Accepted Answer · 2017-11-11 18:25:47Z

1

Edited your codesandbox to get it working: https://codesandbox.io/s/m4x7j1jm19

Note that if you set fields to an empty object in your cancel function, then you have to be sure to set each field to an empty string in your input values (I just did the first field):

value={this.state.fields["event_bucket"] || ''}

answered Nov 11, 2017 at 18:25

Rick Jolly

3,0192 gold badges27 silver badges32 bronze badges

3 Comments

Rick Jolly Over a year ago

But yours isn't working. There's an error in your update alert("fields?", fields); where fields isn't defined.

Rick Jolly Over a year ago

Well, I suppose there's another error for you to debug. If you can't find it then start over with my working example?

Rick Jolly Over a year ago

You did this: this.state.fields["event_bucket" || ''] instead of what I wrote: this.state.fields["event_bucket"] || ''

Joao · Accepted Answer · 2017-11-11 18:04:00Z

0

I recommend making the input a controlled input. Try this on for size:

class ComponentName extends Component {
  constructor(props){
    super(props)
    this.state = {
      myValue: ''
    }

    this.clearData = this.clearData.bind(this)
    this.handleChangeTextbox = this.handleChangeTextbox.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
    this.onCancel = this.onCancel.bind(this)
  }

  clearData(){
    this.setState({
      myValue: ''
    })
  }

  handleValidation(){
    return 'whatever'
  }

  handleChangeTextbox(e){
    this.setState({
      myValue: e.target.value
    })
  }

  onSubmit(e){
    e.preventDefault();
    if(this.handleValidation()){
      alert("Form submit")
      this.clearData()
    }
  }

  onCancel(e){
    e.preventDefault()
    alert("Cancel")
    this.clearData()
  }

  render() {
    return (
      <div>
      <textarea value={this.state.myValue} onChange={this.handleChangeTextbox} />
      <button type="submit" className="btn btn-success active" onClick={this.onSubmit}><b>Create</b></button>
      <button type="button" className="btn btn-warning"><b>Preview</b></button>
      <button type="button" className="btn btn-danger" onClick={this.onCancel}><b>Cancel</b></button>
      </div>
    )
  }
}

See it work here: https://stackblitz.com/edit/so-answer-httpsstackoverflowcomquestions47240386how-to-clear

edited Nov 11, 2017 at 18:04

answered Nov 11, 2017 at 16:58

Joao

2,7372 gold badges27 silver badges36 bronze badges

5 Comments

Balázs Édes Over a year ago

Consider not using arrow functions and binding the event handlers

Joao Over a year ago

The arrow functions part doesn't really affect the answer, I just didn't want to confuse anybody by the way I define class methods.

Joao Over a year ago

Why the downvote without a comment? Does this answer in some way not fulfill the question?

Joao Over a year ago

Then I suggest following up with comments as to why it won't work rather than downvoting answers that contributors took time out of their day to craft for your own benefit. The answer above works. See this bin: stackblitz.com/edit/react-dkodhj (also, I removed arrow functions in case that confused you)

Joao Over a year ago

I changed the name of the bin above. It's now found at: stackblitz.com/edit/…

Collectives™ on Stack Overflow

How to clear data in textbox in reactjs

3 Answers 3

3 Comments

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related