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>

回答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"] || ''}

回答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>

回答3:

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

来源：https://stackoverflow.com/questions/47240386/how-to-clear-data-in-textbox-in-reactjs

标签

javascript

reactjs

form-submit