Overview
In my custom Docusaurus page, a simple button event handler does not execute upon click. The file is in the form of a React component, as is the norm for Docusaurus pages.
What I did
1) I set up my Docusaurus application using docusaurus-init, as advertised on Docusaurus' GitHub page (see https://www.npmjs.com/package/docusaurus-init)
2) I added a custom page as described here https://docusaurus.io/docs/en/custom-pages. I.e., I added a JS file to the pages/ folder.
The custom page code
This is the entirety of the code for the page. The code within the React component is copied from a React example found in the docs. I added the console.log statements in the handlers.
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;
Output I expect
An alert should pop up, and output should appear in the console. Because of event.preventDefault(), page should not be refreshed.
What happens
The input field as well as the button shows up just fine. I type some text in the input field and hit submit. Input field goes blank, no alert, no output in console (neither in client or on server). It appears a refresh took place, which event.preventDefault() apparently did not prevent.
