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个警告，我还有一个后续问题:

错误: Uncatch TypeError: 无法读取 null 的属性‘ other Checked’

警告: getInitialState 是在 RadioOther 上定义的，这是一个普通的 JavaScript 类 你的意思是定义一个状态属性吗？

  1. Can anyone see where the error lies, I know it is due to the conditional statement in the DOM but apparently I am not declaring its initial value correctly?

  2. 我应该让 GetInitialState静止吗

  3. 如果 getInitialState 不正确，声明原型的合适位置在哪里？

更新:

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


module.exports = RadioOther;

@ssorallen, this code :

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

产生 "Uncaught ReferenceError: this is not defined"，并在下面修正

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

but now, clicking the other button now produces error:

Uncaught TypeError: Cannot read property 'props' of undefined

37245 次浏览
小开
最佳答案
  • getInitialState is not used in ES6 classes. Instead assign this.state in the constructor.
  • 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);，但在我看来更简洁。

In your case the radio button will look like the below.

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

Update

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

小开

如果使用的是 Babel-plugin-Transform-class-properties或 第二阶段(或阶段1或阶段0) ，可以使用以下语法:

class RadioOther extends React.Component {


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


state = {
otherChecked: false,
};


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


...


}

提交答案