React, ES6 - getInitialState đã được định nghĩa trên một lớp JavaScript đơn giản

Tôi có thành phần sau ( 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>
         )
     }
 };

Trước khi sử dụng ECMAScript6 tất cả đều ổn, bây giờ tôi nhận được 1 lỗi, 1 cảnh báo và tôi có một câu hỏi tiếp theo:

Lỗi: Uncaught TypeError: Không thể đọc thuộc tính 'otherChecked' của null

Cảnh báo: getInitialState đã được xác định trên RadioOther, một lớp JavaScript đơn giản. Điều này chỉ được hỗ trợ cho các lớp được tạo bằng React.createClass. Ý của bạn là định nghĩa một tài sản nhà nước thay thế?

1. Bất cứ ai cũng có thể thấy lỗi nằm ở đâu, tôi biết đó là do câu lệnh có điều kiện trong DOM nhưng rõ ràng tôi không khai báo chính xác giá trị ban đầu của nó?

2. Tôi có nên làm cho getInitialState tĩnh

3. Đâu là nơi thích hợp để khai báo proptypes của tôi nếu getInitialState không đúng?

CẬP NHẬT:

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

   module.exports = RadioOther;

@ssorallen, mã này:

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

sản xuất "Uncaught ReferenceError: this is not defined", và trong khi dưới đây sửa chữa rằng

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

nhưng bây giờ, nhấp vào nút khác bây giờ tạo ra lỗi:

Uncaught TypeError: Cannot read property 'props' of undefined

• getInitialStatekhông được sử dụng trong các lớp ES6. Thay vào đó chỉ định this.statetrong hàm tạo.
• propTypes nên là một biến lớp tĩnh hoặc được gán cho lớp, nó không nên được gán cho các thể hiện thành phần.
• Các phương thức thành viên không được "tự động ràng buộc" trong các lớp ES6. Đối với các phương thức được sử dụng làm cuộc gọi lại, hãy sử dụng các trình khởi tạo thuộc tính lớp hoặc gán các thể hiện ràng buộc trong hàm tạo.

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 = () => {
    ...
  };

  ...

}

Xem thêm trong tài liệu của React về Lớp ES6: Chuyển đổi hàm thành lớp

Thêm vào câu trả lời của Ross .

Bạn cũng có thể sử dụng chức năng mũi tên ES6 mới trên thuộc tính onChange

Nó tương đương về mặt chức năng với định nghĩa this.onRadChange = this.onRadChange.bind(this);trong hàm tạo nhưng theo tôi thì ngắn gọn hơn.

Trong trường hợp của bạn, nút radio sẽ giống như bên dưới.

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

Cập nhật

Phương thức "ngắn gọn hơn" này kém hiệu quả hơn các tùy chọn được đề cập trong câu trả lời của @Ross Allen vì nó tạo ra một hàm mới mỗi khi render()phương thức được gọi

Nếu bạn đang sử dụng thuộc tính babel-plugin-Transform-class hoặc babel-preset-giai đoạn-2 (hoặc giai đoạn-1 hoặc giai đoạn-0), bạn có thể sử dụng cú pháp này:

class RadioOther extends React.Component {

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

  state = {
      otherChecked: false,
  };

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

  ...

}