使用临冬城的反应形式

Question

我在使用临冬城创建动态表单时遇到了困难。

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;

每次更新输入字段时，都会出现错误。update的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

事实上，在没有任何库的情况下，做一个有反应的表单并不难，我经常想为什么人们会立即求助于它们。尝试使用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>
    );
  }
}