反应事件处理程序未在 Docusaurus 页面上执行

Question

概览

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

我做了什么

1) 我使用 docusaurus-init 设置我的 Docusaurus 应用程序，正如 Docusaurus 的 GitHub 页面上所宣传的那样（参见 https://www.npmjs.com/package/docusaurus-init）

2) 我按照这里 https://docusaurus.io/docs/en/custom-pages 的描述添加了一个自定义页面。即，我在 pages/ 文件夹中添加了一个 JS 文件。

自定义页面代码

这是页面的全部代码。 React 组件中的代码是从 docs 中的 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;

我期望的输出

应该弹出一个警告，输出应该出现在控制台中。由于 event.preventDefault()，页面不应刷新。

会发生什么

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

Answer 1

我又看了一遍。也许试试这个！

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

您忘记绑定到 react 组件。这可能导致错误，它没有出现 event.preventDefault() 语句

Answer 2

嗨，这里是 Docusaurus 维护者。

这不是错误。在 v1 中，使用 React 作为渲染引擎，构建步骤的输出只是 HTML。没有向客户端发送 React 运行时，因此事件处理程序将无法工作。

您需要在 React 组件中编写脚本标签才能使其正常工作。这是一个 example.

如果您需要构建丰富的网站，您应该尝试 Docusaurus 2。您的代码将在那里按预期工作。

反应事件处理程序未在 Docusaurus 页面上执行

React event handler not executing on Docusaurus page

html

javascript

reactjs

static-generator

docusaurus

概览

我做了什么

自定义页面代码

我期望的输出

会发生什么