React Form с использованием Винтерфелла

У меня проблемы с использованием Винтерфелла для создания динамической формы.

https://github.com/andrewhathaway/Winterfell

http://winterfell.andrewhathaway.net/

Я пытаюсь реализовать базовую форму входа, но при проверке получаю ошибки. Я скопировал схему и класс js. Все, что я делаю, это ссылаюсь на них в моем файле App.js.

form.js

import './SimpleForm.css';
var React = require('react');
var Winterfell = require('winterfell');
var loginSchema = require('./loginSchema');


class SimpleForm extends React.Component {
    render(){
        var onRender = () => {
            console.info('Great news! Winterfell rendered successfully');
        };

        var onUpdate = (questionAnswers) => {
            console.info('Question Updated! The current set of answers is: ', questionAnswers);
        };

        return(
            <div className = "Sform">
                <Winterfell schema = {loginSchema}
                    onRender = {onRender}
                    onUpdate = {onUpdate} />,
            </div>
        );

    }

}

export default SimpleForm;

Ошибка возникает каждый раз, когда я обновляю поле ввода. Оператор console.info для обновления никогда не вызывается. Когда я заполняю форму на localhost, я получаю следующие ошибки:

ReactBaseClasses.js:68 Uncaught TypeError: this.updater.enqueueCallback is not a function
at EmailInput.push.../../../node_modules/winterfell/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState (ReactBaseClasses.js:68)
at EmailInput.handleChangeEvent (emailInput.js:99)
at HTMLUnknownElement.callCallback (react-dom.development.js:144)
at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
at invokeGuardedCallback (react-dom.development.js:243)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:258)
at executeDispatch (react-dom.development.js:615)
at executeDispatchesInOrder (react-dom.development.js:640)
at executeDispatchesAndRelease (react-dom.development.js:740)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:753)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:718)
at runEventsInBatch (react-dom.development.js:896)
at runExtractedEventsInBatch (react-dom.development.js:906)
at handleTopLevel (react-dom.development.js:5074)
at batchedUpdates$1 (react-dom.development.js:18374)
at batchedUpdates (react-dom.development.js:2299)
at dispatchEvent (react-dom.development.js:5154)
at interactiveUpdates$1 (react-dom.development.js:18436)
at interactiveUpdates (react-dom.development.js:2320)
at dispatchInteractiveEvent (react-dom.development.js:5130)

Я не уверен, что мне не хватает, поскольку я просто копирую простой пример.

reactjs forms

08.11.2018 13:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

273

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не рекомендую вам использовать эту библиотеку, она давно не обновлялась и не работает с React 16 https://github.com/andrewhathaway/Winterfell/issues/106

На самом деле создать форму в React без каких-либо библиотек несложно. Я часто удивляюсь, почему люди сразу же обращаются к ним. Попробуйте создать форму входа, используя html-входы и setState для изменения значений (и проверку html5 или setState для обратной связи об ошибках), и вы увидите, что это несложно :)

Вот простой пример для начала:

class LoginForm extends React.PureComponent {
  state = {
    email: '',
    password: '',
  };

  onFormSubmit = e => {
    const { email, password } = this.state;
    e.preventDefault();
    console.info({ email, password });
  };

  render() {
    return (
      <form onSubmit = {this.onFormSubmit}>
        <input
          type = "email"
          placeholder = "Enter your email"
          onChange = {e => this.setState({ email: e.target.value })}
          required
        />
        <input
          type = "password"
          placeholder = "Enter your password"
          onChange = {e => this.setState({ password: e.target.value })}
          required
        />
        <button type = "submit">Login</button>
      </form>
    );
  }
}

Спасибо. Я постараюсь построить форму самостоятельно

— 08.11.2018 13:48

Блестяще! Спасибо

— 08.11.2018 15:14

08.11.2018 13:45