React, ES6 - getInitialState 是在一个普通的 JavaScript 类上定义的

IT技术 reactjs ecmascript-6
2021-04-29 23:56:28

我有以下组件 ( 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 个警告，我有一个后续问题：

错误：未捕获的类型错误：无法读取 null 的属性“otherChecked”

警告： getInitialState 是在 RadioOther 上定义的，它是一个普通的 JavaScript 类。这只支持使用 React.createClass 创建的类。你的意思是定义一个状态属性吗？

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

  2. 我应该让getInitialState静态

  3. 如果 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,
         };
     }

产生"Uncaught ReferenceError: this is not defined"，而下面更正了

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

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

Uncaught TypeError: Cannot read property 'props' of undefined

3个回答
  • getInitialState在 ES6 类中不使用。而是this.state在构造函数中赋值。
  • propTypes 应该是静态类变量或分配给类，不应分配给组件实例。
  • ES6 类中的成员方法不是“自动绑定”的。对于用作回调的方法，要么使用类属性初始值设定项，要么在构造函数中分配绑定实例。
export default class RadioOther extends React.Component {

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

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

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

  ...

}

在 React 的关于 ES6 类的文档中查看更多信息：将函数转换为类

添加到罗斯的答案。

您还可以在 onChange 属性上使用新的ES6 箭头函数

它在功能上等同this.onRadChange = this.onRadChange.bind(this);于在构造函数中定义，但在我看来更简洁。

在您的情况下，单选按钮将如下所示。

<input type="radio"
       ref="otherRadBtn"
       onChange={(e)=> this.onRadChange(e)}
       name={this.props.name}
       value="other"/>

更新

这种“更简洁”的方法比@Ross Allen 的答案中提到的选项效率低，因为每次render()调用该方法时它都会生成一个新函数

如果您使用babel-plugin-transform-class-properties或babel-preset-stage-2（或 stage-1 或 stage-0），则可以使用以下语法：

class RadioOther extends React.Component {

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

  state = {
      otherChecked: false,
  };

  onRadChange = () => {
    ...
  };

  ...

}
其它你可能感兴趣的问题
上一篇如何识别喷嘴磨损 下一篇糊状的小顶层？