javascript - javascript - How to clear data in textbox in reactjs - answerstu - answerstu.com answerstu

javascript - How to clear data in textbox in reactjs

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>

3 Answers

  1. Gabriel- Reply

    2019-11-15

    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"] || ''}
    
  2. Gavin- Reply

    2019-11-15

    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>
    
  3. George- Reply

    2019-11-15

    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:

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>