Реагировать на форму с помощью Winterfell

Question

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

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.log('Great news! Winterfell rendered successfully');
        };

        var onUpdate = (questionAnswers) => {
            console.log('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.log для обновления никогда не вызывается. Когда я заполняю форму в 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.handleChange (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)

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

Answer 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.log({ 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>
    );
  }
}