当前位置: 首页 > 面试题库 >

在React.js中设置onSubmit

祁鸿晖
2023-03-14
问题内容

在提交表单时,我正在尝试doSomething()取代默认的发布行为。

显然,在React中,onSubmit是表单支持的事件。但是,当我尝试以下代码时:

var OnSubmitTest = React.createClass({
    render: function() {
        doSomething = function(){
           alert('it works!');
        }

        return <form onSubmit={doSomething}>
        <button>Click me</button>
        </form>;
    }
});

该方法doSomething()已运行,但是此后仍执行默认的发布行为。

您可以在我的jsfiddle中进行测试。

我的问题:如何防止默认的发布行为?


问题答案:

在您的doSomething()函数中,传递事件e并使用e.preventDefault()

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}


 类似资料:
  • 问题内容: 与在元素上设置元素的innerHTML与在元素上设置危险地设置InnerHTML属性有什么“幕后”区别?假设为简单起见,我正在对事物进行适当的消毒。 例: 与 我做的事情比上面的示例复杂一些,但总体思路是相同的 问题答案: 是,有一点不同! 使用vs 的直接效果是相同的-DOM节点将使用注入的HTML更新。 但是 ,在使用它时,让React 在幕后知道该组件内部的HTML并不是它关心的

  • 问题内容: 我正在尝试使用带有剑道分离器的Reactjs。拆分器的样式属性如下 使用Reactjs,如果我正确理解了所有内容,则可以使用内联样式来实现 但是,我也使用Dustin Getz jsxutil尝试将内容拆分成更多部分并具有独立的html片段。到目前为止,我有以下html片段(splitter.html) 和splitter.js组件,该组件按如下方式引用此html 现在,当我运行此命令

  • 我是库伯内特人。我在Minikube中配置的整个设置。我不确定它是否与其他kubernetes设置有所不同。 我已经在我的设置中创建了一个POD,一个Spring Boot应用程序正在8080端口上运行,这个服务将在20080端口上向集群公开。 我正在运行tcpDum的集群内运行另一个pod。我需要在20080上转储撞击集群的HTTP数据包。请告诉我如何从tcpDumpod访问集群接口。 我尝试了

  • 我正在尝试设置一个VisualStudio代码扩展,它将帮助我基于模式构建一个XML文件。 此扩展具有以下要求: (注意:我安装了Java JDK 8) > 在VSCode首选项中 环境变量JAVA_HOME或JDK_HOME 注意:路径应以包含bin文件夹的父文件夹结尾。示例路径:/usr/lib/jvm/java-1.8.0,如果bin位于/usr/lib/jvm/java-1.8.0/bin

  • 本文向大家介绍在React.js中样式化,包括了在React.js中样式化的使用技巧和注意事项,需要的朋友参考一下 React.js的样式可以通过以下两种方式完成 CSS样式表 内联样式 首先来看CSS样式表 我们有App.js文件,如下所示- 在App.js文件中,我们导入了一个包含CSS类myColoredText的App.css文件 请注意 我们在属性className的双引号中使用了CSS

  • 本文向大家介绍在React.js中使用useContext,包括了在React.js中使用useContext的使用技巧和注意事项,需要的朋友参考一下 useContext钩子允许在不使用redux的情况下将数据传递给子元素。 useContext是react中的一个命名导出,因此我们可以导入如下的功能组件- 如果我们只需要将数据传递给child元素,则它是Redux的简单替代方案。 创建上下文的