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>
    );
  }
}

使用Winterfell反应表格

1 个答案: