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

IT技术 javascript reactjs form-submit
2021-05-14 07:46:29

如何清除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>
3个回答

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

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

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

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

我建议将输入设为受控输入。试试这个尺寸：

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-httpsstackoverflowcomquestions47240386how-to-clear

其它你可能感兴趣的问题
上一篇react类组件中的URL参数 下一篇React - 在 node_modules 中导入一个module