jjzjj

javascript - 提交后清除 reactJs textarea

coder 2024-05-13 原文

我在天窗对话框中有以下表单组件，提交后，如果重新打开包含表单的对话框，它包含以前提交的值。任何人都可以告诉我每次打开对话框时如何停止它并清除 textarea 值吗？

这是我的组件:

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;

最佳答案

基本上您的表单没有被卸载。所以把代码写在 componentDidMount 里就没有意义了。因此，快速解决问题的方法是在读取处理提交方法中的值后清除文本框

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

关于javascript - 提交后清除 reactJs textarea，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31051669/

javascripttextareanotessection34formsreactjs

有关javascript - 提交后清除 reactJs textarea的更多相关文章

  1. ruby - 如何在 Ubuntu 中清除 Ruby Phusion Passenger 的缓存？ - 2

    我试过重新启动apache，缓存的页面仍然出现，所以一定有一个文件夹在某个地方。我没有“公共(public)/缓存”，那么我还应该查看哪些其他地方？是否有一个URL标志也可以触发此效果？ 最佳答案 您需要触摸一个文件才能清除phusion，例如:touch/webapps/mycook/tmp/restart.txt参见docs 关于ruby-如何在Ubuntu中清除RubyPhusionPassenger的缓存？，我们在StackOverflow上找到一个类似的问题：

  2. git使用常见问题（提交代码，合并冲突） - 2

    文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St

  5. ruby-on-rails - 在 rails 中提交后回滚事务 - 2

    保存成功后可以回滚吗？让我有一个带有属性名称、电子邮件等的用户模型。例如u=User.newu.name="test_name"u.email="test@email.com"u.save现在记录将成功保存在数据库中，之后我想回滚我的事务(不是销毁或删除)。有什么想法吗？ 最佳答案 您可以通过交易来做到这一点，请参阅http://markdaggett.com/blog/2011/12/01/transactions-in-rails/例子:User.transactiondoUser.create(:username=>'Nemu

  6. ruby-on-rails - 清除 GitLab 中的所有 Assets - 2

    我想在我公司安装的GitLab中使用自定义Logo-白色、Logo-黑色和网站图标。我用谷歌搜索了我的屁股并尝试了所有我能找到的方法来清除这些该死的图像，但似乎没有任何效果。这是唯一似乎成功运行但未删除图像的进程:bundleexecrakecache:clearRAILS_ENV=productionservicegitlabstopredis-cliFLUSHALLbundleexecrakeassets:precompileRAILS_ENV=productionservicegitlabstart然后我清除我的浏览器缓存并转到该域，再次出现相同的该死的图像!我什至删除了我能从应

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - RailsTutorial - 第 8.4.3 章 - 在集成测试中添加用户后未清除测试数据库 - 2

    我被这个难住了。到目前为止教程中的一切都进行得很顺利，但是当我将这段代码添加到我的/spec/requests/users_spec.rb文件中时，事情开始变得糟糕:describe"success"doit"shouldmakeanewuser"dolambdadovisitsignup_pathfill_in"Name",:with=>"ExampleUser"fill_in"Email",:with=>"ryan@example.com"fill_in"Password",:with=>"foobar"fill_in"Confirmation",:with=>"foobar"cl

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐