如何清除反应中的文本框中的数据

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

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

来源

2017-11-11 Riya Kapuria

编辑您的codesandbox得到它的工作：https://codesandbox.io/s/m4x7j1jm19

请注意，如果您在取消功能设置fields到一个空的对象，那么你必须确保每个字段设置为空字符串你的输入值（我刚刚做了第一个字段）：

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

来源

2017-11-11 18:25:47

我在这里更新了https://codesandbox.io/s/ymvk1pmwjz。你能检查吗？ –

但你的工作不正常。你的更新有一个错误alert（“fields？”，fields）;'没有定义字段。 –

删除后，也不工作 –

-2

它看起来像你的文本是不可控的输入。如果多数民众赞成的情况下，我假设你已经采取了从输入值编程，如：

const myText = document.getElementById('myTextbox').value

如果多数民众赞成的情况下，你可以清除它同样

document.getElementById('myTextbox').value = ""

来源

2017-11-11 16:54:24

如何在ReactJs中使用document.getElementById ..？ –

你只需要给你的文本框一个id：然后在你的onSubmit（）函数中使用document.getElementById –

我建议使输入一个受控输入。试试这个关于大小：

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

来源

2017-11-11 16:58:48 Joao

考虑不使用箭头函数并绑定事件处理程序 –

箭头函数部分并不会真正影响答案，我只是不想用我定义类方法的方式混淆任何人。 – Joao

为什么downvote没有评论？这个答案在某种程度上不能解决问题吗？ – Joao

获取所有输入字段状态，复位后状态的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>

来源

2017-11-11 17:03:59

无法读取未定义的属性'setState'>>这个错误我得到 –

你是否设置了这个值的this.state构造函数方法中的名称？ –

是的，我已经设置了 –

如何清除反应中的文本框中的数据

回答

相关问题