Javascript 未在Docusaurus页上执行React事件处理程序 概述

在我的自定义Docusaurus页面中，单击时不会执行简单的按钮事件处理程序。该文件采用React组件的形式，这是Docusaurus页面的规范

我所做的 1） 我使用Docusaurus init设置我的Docusaurus应用程序，正如Docusaurus的GitHub页面上所宣传的（请参阅）

2） 我添加了一个自定义页面，如下所述。例如，我在

pages/

文件夹中添加了一个JS文件

自定义页面代码 这是页面的全部代码。React组件中的代码是从中找到的React示例中复制的。我在处理程序中添加了

console.log

语句

const React = require('react');

const CompLibrary = require('../../core/CompLibrary.js');

class SignUp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        console.log("Change occurred!");
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        console.log("Submit occurred!");
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
            <label>
            Name:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
             <input type="submit" value="Submit" />
            </form>
    );
    }
}

module.exports = SignUp;

const React=require（'React'）；
const CompLibrary=require（'../core/CompLibrary.js'）；
类注册扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
log（“发生了更改！”）；
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
日志（“提交发生了！”）；
警报（“已提交名称：”+this.state.value）；
event.preventDefault（）；
}
render（）{
返回(
姓名：
);
}
}
module.exports=注册；

我期望的产量 应弹出警报，并在控制台中显示输出。由于

event.preventDefault（）

，页面不应刷新

发生了什么

---

输入字段和按钮显示得很好。我在输入字段中键入一些文本，然后点击submit。输入字段变为空白，没有警报，控制台中没有输出（无论是在客户端还是在服务器上）。似乎发生了刷新，而

event.preventDefault（）

显然没有阻止刷新。

我再次检查了它。试试这个吧

 <form onSubmit={this.handleSubmit.bind(this)}>

您忘记了与react组件的绑定。

---

这可能导致了一个错误，它没有出现在event.preventDefault（）语句中

这不是一个bug。在v1中，React用作渲染引擎，构建步骤的输出仅为HTML。没有向客户端提供React运行时，因此事件处理程序无法工作

您需要在React组件中编写脚本标记，才能使其正常工作。这是一个很好的例子

---

如果你需要建立丰富的网站，你应该试试。您的代码将按预期工作。

我也遇到了同样的问题。我可以解决它删除警报！也许一开始的event.preventDefault（）也解决了这个问题。但我没有证明。当你说“event.preventDefault（）开头可能解决了这个问题”时，“开头”到底指的是什么@我回答了！请检查一下！看来没有办法做到这一点。看见然而，如果有人知道一个黑客的做法，请让我知道！也可以通过您的所有输入进行更改。实际上，我测试了与您几乎相同的代码，但没有出现任何奇怪的行为！成功了！而且你的装订在你身边是正确的。真的。。。真奇怪。你确定你使用的是Docusaurus v1而不是v2吗？事实上，sry为了我的建议，我在pure React中查看了它！不是在多库萨鲁斯！真的很抱歉！明白了，这更有意义。在Docusaurus v1中似乎没有办法执行事件处理程序（请参阅我在上面的评论中链接到的GitHub问题）。无论如何感谢您的帮助：）好的，那么您是说可以通过脚本标记实现事件处理程序的功能？现在，您可以详细说明脚本标记的内容必须如何格式化吗？显然，它的工作方式与普通HTML文件不同。例如，在您提供的示例中，它看起来类似于

{this.props…&&（（）}

。你能解释一下吗？谢谢您必须添加将成为最终HTML的一部分的

标记。尝试添加

并查看页面。是的，它很有效。谢谢这样做是否有任何安全问题或其他缺陷（“危险的SetinenerHTML”听起来不太令人鼓舞），除了代码看起来绝对令人发指之外这个问题很难回答。但由于Docusaurus生成静态内容，风险较小。通常，风险来自在浏览器中执行的恶意动态用户输入的服务器端呈现。在Docusaurus的情况下，通常所有内容都是静态的，您可以完全控制渲染内容，因此风险非常小。