将 createClass 更改为 Component答案

【问题标题】：Change createClass to Component将 createClass 更改为 Component
【发布时间】：2017-12-20 12:43:12
【问题描述】：

我是 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”导入 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 扩展组件 { 6 | 7 |常量 FormSchema = t.struct({ | ^ 8 | name: t.String, // 一个必需的字符串 9 | age: t.maybe(t.Number), // 可选数字 10 | rememberMe: t.Boolean // 一个布尔值

我希望有人能帮忙。

非常感谢

【问题讨论】：

标签： javascript forms reactjs react-native

【解决方案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 和其他类方法

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

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

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>)
   }
}

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

【讨论】：

我将 const 放在类之外，当表单生成时，一旦我在字段中输入一些数据并单击提交，我就会收到错误 TypeError: Cannot read property 'refs' of undefined 的行 const value = this.refs.form.getValue() 我还把const 在渲染中和同样的错误
你忘了绑定提交方法使用这个 onSubmit = (evt) => {...}
或this.onSubmit.bind(this);
我以前见过这种语法。我在哪里写这个this.onSubmit.bind(this); 还有绑定东西是什么意思？
甜，这似乎有效，谢谢！作为一个附带问题，如果您不想回答，我不希望您回答这个问题，因为它不是原始问题的一部分，但console.log() 产生空值。这是什么原因？我复制并粘贴了示例

【解决方案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 以实现带有验证的表单。我使用它，它非常有用并且可以接受。

祝你好运！

【讨论】：