reactjs - ReactJs/ECMAScript 6

  显示原文与译文双语对照的内容

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


错误: 未捕获 TypeError: 无法读取null的属性'otherChecked'

警告:getInitialState是在RadioOther上定义的,这是一。 仅对使用 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,
 };
 }

produces ReferenceError: 这不是定义",而在更正


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

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

:未捕获的TypeError: 无法读取未定义的属性'道具'

时间: 作者:

  • ES6类中没有使用 getInitialState 。 在构造函数中指定 this.state
  • propTypes 应该分配给类,而不是实例。
  • 成员方法在ES6类中不是"自动绑定"。 对于用作回调的方法,请将它们绑定到位或者将绑定实例分配给构造函数中 this.callback = this.callback.bind(this);

有关ES6类的React博客帖子,请参见: https://facebook.github.io/react/blog/2015/01/27/react- v0.13.0 -beta-1.html


class RadioOther extends React.Component {

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

//Bind callback methods to make `this` the correct context.
 this.onRadChange = this.onRadChange.bind(this);
 }

 onRadChange() {
. . .
 }

. . .

}

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

module.exports = RadioOther;

作者:
...