Javascript 将createClass更改为Component_Javascript_Forms_Reactjs_React Native

Javascript 将createClass更改为Component

javascript forms reactjs react-native

Javascript 将createClass更改为Component,javascript,forms,reactjs,react-native,Javascript,Forms,Reactjs,React Native,我对这个最基本的问题感到非常抱歉。我在谷歌上搜索过，也尝试过其他StackOverflow帖子，但都没有效果。我正在尝试创建带有验证的表单，我发现了以下示例： import t from 'tcomb-form' const FormSchema = t.struct({ name: t.String, // a required string age: t.maybe(t.Number), // an optional number rememberMe: t.B

我对这个最基本的问题感到非常抱歉。我在谷歌上搜索过，也尝试过其他StackOverflow帖子，但都没有效果。我正在尝试创建带有验证的表单，我发现了以下示例：

import t from 'tcomb-form'

const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean
})

    const App = React.createClass({

      onSubmit(evt) {
        evt.preventDefault()
        const value = this.refs.form.getValue()
        if (value) {
          console.log(value)
        }
      },

      render() {
        return (
          <form onSubmit={this.onSubmit}>
            <t.form.Form ref="form" type={FormSchema} />
            <div className="form-group">
              <button type="submit" className="btn btn-primary">Save</button>
            </div>
          </form>
        )
      }

    })

以下是我的尝试：

从“React”导入React，{Component} 从“tcomb表单”导入t

export class GiveFeedback extends Component {

  const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean
})

  onSubmit(evt) {
    evt.preventDefault()
    const value = this.refs.form.getValue()
    if (value) {
      console.log(value)
    }
  }

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <t.form.Form ref="form" type={FormSchema} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Save</button>
        </div>
      </form>
    )
  }

}

export default GiveFeedback

导出类扩展组件{
const FormSchema=t.struct({
name:t.String，//一个必需的字符串
年龄：t.maybe（t.Number），//可选数字
记住：t.Boolean//a Boolean
})
onSubmit（evt）{
evt.preventDefault（）
常量值=this.refs.form.getValue（）
如果（值）{
console.log（值）
}
}
render（）{
返回(
拯救
)
}
}
导出默认反馈

但是，当我运行代码时，会出现以下错误：

意外令牌（7:10）

5 |导出类组件{ 6 | 7 | const FormSchema=t.struct({ | ^ 8 | name:t.String，//一个必需的字符串 9 |年龄：t.maybe（t.Number），//可选数字 10 |记住：t.布尔//布尔

我希望有人能帮忙

非常感谢

一切都很好，你只要在课堂上放置const，它就无效了

删除您的代码并将其放在课堂之外

 const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean
})

export class GiveFeedback extends Component {
......
}

或者也可以在render（）函数中放置常量

信息：任何在react组件中定义的自定义方法都需要引用此，如果没有此项，则无法使用setState和其他类方法

有很多方法可以将此绑定到方法

一,

二,

一切都很好，你只要把常量放在课堂上，它就无效了

删除您的代码并将其放在课堂之外

 const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean
})

export class GiveFeedback extends Component {
......
}

或者也可以在render（）函数中放置常量

信息：任何在react组件中定义的自定义方法都需要引用此，如果没有此项，则无法使用setState和其他类方法

有很多方法可以将此绑定到方法

一,

二,

您正在复制

导出

关键字：

export class GiveFeedback extends Component {
// ...
export default GiveFeedback

根据ES6

export

documentation（），您可以使用以下两个选项中的任意一个：

export default class GiveFeedback extends Component {
// or
class GiveFeedback extends Component {
  // ... your class definition here
}
export default GiveFeedback

我建议您选择第二个选项，因为以后很容易添加一些装饰器（如redux）：

Plus

看看如何实现带有验证的表单。我使用它，它非常有用，并且文档化程度高

祝你好运！

你正在复制

导出