加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React,ES6 – getInitialState是在一个普通的JavaScr

发布时间:2020-12-15 07:16:32 所属栏目:百科 来源:网络整理
导读:我有以下组件(radioOther.jsx): 'use strict'; //module.exports = -- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } //
我有以下组件(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警告,我有一个后续问题:

Error: Uncaught TypeError: Cannot read property ‘otherChecked’ of null

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?

>任何人都可以看到错误在哪里,我知道这是由于DOM中的条件语句,但显然我不是正确地声明其初始值?
>我应该让getInitialState静态
>如果getInitialState不正确,在哪里可以声明我的proptypes?

更新:

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

   module.exports = RadioOther;

@ssorallen,这段代码:

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

产生“未捕获ReferenceError:这未定义”,而下面纠正

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

但现在,点击其他按钮现在产生错误:

Uncaught TypeError:无法读取未定义的属性“props”

> getInitialState不用于ES6类。而是在构造函数中分配this.state。
> propTypes应该分配给类而不是实例。
> ES6类中的成员方法不是 “auto-bound”。对于用作回调的方法,请使用 class property initializers或在构造函数中分配绑定的实例。
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;

更多在关于ES6类的React的文档:https://facebook.github.io/react/docs/reusable-components.html#es6-classes

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读