将CreateClass更改为组件

Question

我是新手反应，对一个真正的基本问题感到抱歉。我已经在Google上进行了搜索，并尝试了其他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>
        )
      }
    })

但是，我想通过以下方式将其转换为普通方式：

export class GiveFeedback extends Component {...}

这是我的尝试：

导入react，{component}来自'react'从'tcomb-form'导入

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

但是，当我运行代码时，我会收到此错误：

意外令牌（7:10）

5 |导出类GiveFeedback扩展了组件{ 6 | 7 |const formschema = t.struct（{{ |^ 8 |名称：T.String，//必需的字符串 9 |年龄：T.Maybe（T.Number），//一个可选号码 10 |记住我：T.Boolean//布尔

我希望有人能提供帮助。

非常感谢

Answer 1

一切都可以，您只将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 {
......
}

或者您也可以将const放在render（）函数中

信息：任何在React组件中定义的自定义方法都需要this的引用，而您不能使用SetState和其他类方法

有很多方法将其绑定到方法

1。

export class GiveFeedback extends Component {
  constructor(){
   super();
   this.yourMethod = this.yourMethod.bind(this);
 }
 yourMethod(){
 //now you get this.state and any other object of class
 }
} 

2。

export class GiveFeedback extends Component {
  constructor(){
   super();
 }
  yourMethod(){
    //now you get this.state and any other object of class
  }
  render(){
    //bind runtime 
    return(<Text onPress={this.yourMethod.bind(this)}>click</Text>)
   }
}

3。

export class GiveFeedback extends Component {
  constructor(){
   super();
 }
  yourMethod = ()=>{ 
     // this style is es6 so no need to bind and scope remain same 
    //now you get this.state and any other object of class
  }
}

Answer 2

您正在复制export关键字：

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

根据ES6 export文档（https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/statement/statement/export）您可以使用这两个选项：

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

我会推荐您第二个选项，因为以后很容易添加一些装饰器（例如redux）：

export default connect(mapStateToProps, actions)(GiveFeedback);

plus

看一下Redux-form，以实现验证表格。我使用它，它非常有用且可接受。

祝你好运！