javascript - React事件处理程序未在Docusaurus页面上执行

总览

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

我做了什么

1）我按照docusaurus的GitHub页面上的广告，使用docusaurus-init设置了Docusaurus应用程序（请参见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()并没有阻止。

最佳答案

您好Docusaurus的维护者在这里。

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

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

如果需要构建功能丰富的网站，则应尝试Docusaurus 2。您的代码将按预期工作。