React，ES6 - getInitialState是在一个纯JavaScript类上定义的 [英] React, ES6 - getInitialState was defined on a plain JavaScript class

问题描述

我有以下组件（ radioOther.jsx ）：

 'use strict';

 //module.exports = <-- omitted in update

   class RadioOther extends React.Component {

     // omitted in update 
     // getInitialState() {
     //    propTypes: {
     //        name: React.PropTypes.string.isRequired
     //    }
     //    return {
     //       otherChecked: false
     //   }
     // }

     componentDidUpdate(prevProps, prevState) {
         var otherRadBtn = this.refs.otherRadBtn.getDOMNode();

         if (prevState.otherChecked !== otherRadBtn.checked) {
             console.log('Other radio btn clicked.')
             this.setState({
                 otherChecked: otherRadBtn.checked,
             });
         }
     }

     onRadChange(e) {
         var input = e.target;
         this.setState({
             otherChecked: input.checked
         });
     }

     render() {
         return (
             <div>
                 <p className="form-group radio">
                     <label>
                         <input type="radio"
                                ref="otherRadBtn"
                                onChange={this.onRadChange}
                                name={this.props.name}
                                value="other"/>
                         Other
                     </label>
                     {this.state.otherChecked ?
                         (<label className="form-inline">
                             Please Specify:
                             <input
                                 placeholder="Please Specify"
                                 type="text"
                                 name="referrer_other"
                                 />
                         </label>)
                         :
                         ('')
                     }
                 </p>
             </div>
         )
     }
 };

在使用ECMAScript6之前，一切都很好，现在我收到1个错误，1个警告，我有一个后续问题：

Prior to using ECMAScript6 all was well, now I am getting 1 error, 1 warning and I have a followup question:

错误：未捕获TypeError：无法读取属性otherChecked为null

Error: Uncaught TypeError: Cannot read property 'otherChecked' of null

警告：在RadioOther（一个纯JavaScript类）中定义了getInitialState。这仅适用于使用
React.createClass创建的类。你是否意味着定义一个国有资产？

Warning: getInitialState was defined on RadioOther, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

---

---

1. 任何人都可以看到错误在哪里，我知道这是由于DOM中的条件语句，但显然我没有正确声明其初始值？

1. Can anyone see where the error lies, I know it is due to the conditional statement in the DOM but apparently I am not declaring its initial value correctly?

如果getInitialState不正确，我应该使用 getInitialState 静态

Should I make getInitialState static

在适当的地方声明我的proptypes？ p>

Where is the appropriate place to declare my proptypes if getInitialState is not correct?

更新：

   RadioOther.propTypes = {
       name: React.PropTypes.string,
       other: React.PropTypes.bool,
       options: React.PropTypes.array }

   module.exports = RadioOther;

@ssorallen，此代码：

@ssorallen, this code :

     constructor(props) {
         this.state = {
             otherChecked: false,
         };
     }

生成未捕获ReferenceError：未定义 ，而在下面修正

     constructor(props) {
     super(props);
         this.state = {
             otherChecked: false,
         };
     }

但是现在点击另一个按钮会产生错误：

but now, clicking the other button now produces error:

未捕获TypeError：无法读取未定义的属性props

推荐答案

• getInitialState 不用于ES6类。而是在构造函数中分配 this.state 。


• propTypes 应该被分配


• 会员方法不是自动绑定。对于用作回调的方法，请使用类属性初始值设置或将绑定的实例构造函数。


• getInitialState is not used in ES6 classes. Instead assign this.state in the constructor.
• propTypes should be assigned to the class not the instances.
• Member methods are not "auto-bound" in ES6 classes. For methods used as callbacks, either use class property initializers or assign bound instances in the constructor.

class RadioOther extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      otherChecked: false,
    };
  }

  // Class property initializer. `this` will be the instance when
  // the function is called.
  onRadChange = () => {
    ...
  };

  ...

}

RadioOther.propTypes = {
  name: React.PropTypes.string.isRequired,
};

module.exports = RadioOther;

请参阅React的有关ES6类的文档： https://facebook.github.io/react/docs/reusable-components.html#es6-classes

See more in the React's documentation about ES6 Classes: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

这篇关于React，ES6 - getInitialState是在一个纯JavaScript类上定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！