1

概述

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

我做了什么

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

2）我添加了一个自定义页面，如此处所述https://docusaurus.io/docs/en/custom-pages。即，我在文件夹中添加了一个 JS 文件pages/。

自定义页面代码

这是页面的全部代码。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;

我期望的输出

应该会弹出一个警报，并且输出应该出现在控制台中。因为event.preventDefault()，页面不应该被刷新。

怎么了

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

4

2 回答 2

2

嗨 Docusaurus 维护者在这里。

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

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

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

于 2019-08-08T22:23:16.073 回答
0

我又检查了一遍。试试这个吧！

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

您忘记了与反应组件的绑定。这可能会导致错误并且它没有出现在 event.preventDefault() 语句中

于 2019-08-08T21:27:18.710 回答