React，ES6 – getInitialState是在一个普通的JavaScript类上定义的
我有以下组件（ 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（一个普通的JavaScript类）上定义。 这只支持使用React.createClass创build的类。 你是不是要定义一个国有财产呢？
-
任何人都可以看到错误在哪里，我知道这是由于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, }; }
产生"Uncaught ReferenceError: this is not defined" ，而下面的更正
constructor(props) { super(props); this.state = { otherChecked: false, }; }
但现在，现在单击其他button会产生错误：
Uncaught TypeError: Cannot read property 'props' of undefined
-
getInitialState不在ES6类中使用。 而是在构造函数中分配this.state。 -
propTypes应该是一个静态类variables或者分配给这个类，它不应该被分配给组件实例。 - 成员方法在ES6类中不是“自动绑定”的 。 对于用作callback的方法，可以使用类属性初始值设定项或在构造函数中分配绑定的实例。
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 = () => { ... }; ... }
有关ES6类的更多信息，请参阅React的文档： https ：//facebook.github.io/react/docs/state-and-lifecycle.html#converting-a-function-to-a-class
加上Ross的答案。
你也可以在onChange属性上使用新的ES6箭头函数
这在function上等同于定义this.onRadChange = this.onRadChange.bind(this); 在构造中，但在我看来更简洁。
在你的情况下，单选button将如下所示。
<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 = () => { ... }; ... }
