Обработчик события React не выполняется на странице Docusaurus

обзор

На моей пользовательской странице Docusaurus простой обработчик событий кнопки не выполняется при нажатии. Файл имеет форму компонента React, что является нормой для страниц Docusaurus.

Что я сделал

1) Я настроил свое приложение Docusaurus, используя docusaurus-init, как было объявлено на странице GitHub Docusaurus (см. 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() видимо не помешало.

Источник

2 ответа

Решение

Привет сопровождающий Docusaurus здесь.

Это не ошибка. В v1 React используется в качестве движка рендеринга, а вывод шага сборки - просто HTML. Клиентам не предоставляется среда выполнения React, поэтому обработчики событий не будут работать.

Вам нужно будет написать теги сценария в вашем компоненте React, чтобы это работало. Это пример.

Вы должны попробовать Docusaurus 2, если вам нужно создавать богатые веб-сайты. Ваш код будет работать так, как задумано.

Источник

Я проверил это снова. Попробуйте возможно это!

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

Вы забыли привязку к компоненту реакции. Возможно, это вызвало ошибку, и оно не дошло до оператора event.preventDefault()

Источник
Другие вопросы по тегам