我有以下组件(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或在构造函数中分配绑定的实例。
> 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