将createClass更改为Component

Question

我是React的新手，对于这个非常基本的问题感到抱歉。我在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 {...}

这是我的尝试：

从'tcomb-form'导入来自'react'的反应，{Component}导入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

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

意外的令牌（7:10）

5 |导出类GiveFeedback扩展了Component {6 | 7 | const FormSchema = t.struct（{| ^ 8 | name：t.String，//一个必需的字符串9 | age：t.maybe（t.Number），//一个可选的数字10 | rememberMe：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（）函数中

info：在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/statements/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);

更

看看redux-form来实现带有验证的表单。我使用它，它是非常有用和可接受的记录。

祝好运！