javascript - react 事件处理程序未在 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

您好，这里是 Docusaurus 维护者。

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

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

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