javascript 提交后清除reactJs textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31051669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear reactJs textarea after submit
提问by Bomber
I have the following form component in a skylight dialog, after submit, if the dialog is reopened containing the form, it contains the previous submitted value. Can anyone please tell me how to stop this and clear the textarea value everytime the dialog is opened?
我在天窗对话框中有以下表单组件，提交后，如果重新打开包含表单的对话框，它包含之前提交的值。谁能告诉我如何在每次打开对话框时停止此操作并清除 textarea 值？
Here is my component:
这是我的组件：
var AddNoteForm = React.createClass({
componentDidMount: function() {
React.findDOMNode(this.refs.notes).value = "";
},
handleSubmit: function (event) {
event.preventDefault();
var notes = React.findDOMNode(this.refs.notes).value;
var details = {
studentId: this.props.studentId,
schoolId: this.props.schoolId,
notes: notes
};
this.props.onSubmit(details);
},
render: function() {
return (
<form className="pure-form pure-form-aligned"
onSubmit={this.handleSubmit}>
<div className="pure-control-group">
<label htmlFor="notes">Note</label>
<textarea ref="notes" id="notes" placeholder="Note..." >
</textarea>
</div>
<div className="pure-controls">
<input type="submit" value="Save" />
</div>
</form>
);
}
});
module.exports = AddNoteForm;
回答by teenu
Basically your form is not getting unmounted. So writing the code in componentDidMount will not make sense. So the quick fix for your problem would be to clear the textarea box after you read the value in handle submit method
基本上你的表格没有被卸载。所以在 componentDidMount 中编写代码是没有意义的。因此，您的问题的快速解决方法是在读取 handle submit 方法中的值后清除 textarea 框
handleSubmit: function (event) {
event.preventDefault();
var notes = this.refs.notes;
var details = {
studentId: this.props.studentId,
schoolId: this.props.schoolId,
notes: notes.value
};
notes.value = ""; // Unset the value
this.props.onSubmit(details);
},
回答by M_Badrah
so if some one stuck in this problem , I was using uncontrolled component and it is somehow complex to clear it, I just change to controlled one and then got it :)
所以如果有人遇到这个问题，我使用的是不受控制的组件，清除它有点复杂，我只是更改为受控组件然后得到它:)
<form onSubmit={e => this.handleSubmit(e)}>
<textarea value={this.state.text} onChange={ e => this.handleChange(e) } />
<button>Submit Comment</button>
</form>
very important to prevent default
防止违约非常重要
handleSubmit = event => {
event.preventDefault();
this.setState({ text: '' });
};
