Reactjs 使用临冬城进行反应

我在使用冬城创建动态表单时遇到问题

我试图实现基本的登录表单，但在检查时出错。我已经复制了模式和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;

import./SimpleForm.css'；
var React=要求（'React'）；
var Winterfell=需要（“Winterfell”）；
var loginSchema=require（'./loginSchema'）；
类SimpleForm扩展了React.Component{
render（）{
var onRender=（）=>{
console.log（'Great news！Winterfell渲染成功'）；
};
变量onUpdate=（问题答案）=>{
log（'问题已更新！当前答案集为：'，问题答案）；
};
返回(
,
);
}
}
导出默认的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)

ReactBaseClasses.js:68未捕获类型错误：this.updater.enqueueCallback不是函数
在EmailInput.push…/../../node_modules/Winterfall/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState（ReactBaseClasses.js:68）
在EmailInput.handleChange（EmailInput.js:99）
在htmlunknowneelement.callCallback（react dom.development.js:144）
在Object.invokeGuardedCallbackDev（react dom.development.js:193）
在invokeGuardedCallback（react dom.development.js:243）
在invokeGuardedCallbackAndCatchFirstError（react dom.development.js:258）
在executeDispatch（react dom.development.js:615）
在ExecuteDispatchesInoder（react dom.development.js:640）
在executeDispatchesAndRelease（react dom.development.js:740）
在executeDispatchesAndReleaseTopLevel（react dom.development.js:753）
在Array.forEach（）处
在foreachs（react dom.development.js:718）
在runEventsInBatch上（react dom.development.js:896）
在RunExtractedEventsBatch上（react dom.development.js:906）
在HandletoLevel（react dom.development.js:5074）
BatchedUpdate$1（react dom.development.js:18374）
在BatchedUpdate上（react dom.development.js:2299）
在dispatchEvent（react dom.development.js:5154）
interactiveUpdates$1（react dom.development.js:18436）
在InteractiveUpdate上（react dom.development.js:2320）
在dispatchInteractiveEvent（react dom.development.js:5130）

---

我不确定我遗漏了什么，因为我只是从一个简单的示例中复制。

我不建议您使用该库，因为它在相当长的一段时间内没有更新，并且不适用于React 16

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

类LoginForm扩展了React.PureComponent{
状态={
电子邮件：“”，
密码：“”，
};
onFormSubmit=e=>{
const{email，password}=this.state；
e、 预防默认值（）；
log（{email，password}）；
};
render（）{
返回(
this.setState（{email:e.target.value}）
必修的
/>
this.setState（{密码：e.target.value}）}
必修的
/>
登录
);
}
}

谢谢。我将尝试建立一个自己的形式！非常感谢。