如何清除reactjs中文本框中的数据

Question

如何在reactjs中清除文本框中的数据？提交表格后，我想清除所有数据以及单击取消按钮。有人可以帮忙吗？

//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>

Answer 1

我建议将输入设为受控输入。试穿尺码：

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>
    )
  }
}

在这里查看它的工作原理：https://stackblitz.com/edit/so-answer-httpsWhosebugcomquestions47240386how-to-clear

Answer 2

在借助 setState() 函数重置状态后，获取所有输入字段的状态。

<!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>

Answer 3

编辑了您的 codesandbox 以使其正常工作：https://codesandbox.io/s/m4x7j1jm19

请注意，如果您在取消函数中将 fields 设置为一个空对象，那么您必须确保在您的输入值中将每个字段设置为一个空字符串（我只做了第一个字段） :

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

如何清除reactjs中文本框中的数据

How to clear data in textbox in reactjs

javascript

form-submit

reactjs