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 {...}

这是我的尝试：

从'react'导入React，{Component} 从'tcomb-form'导入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以实施带有验证的表单。我使用它，它非常有用且可以接受。

祝你好运！

将createClass更改为Component

2 个答案: