Class extends React.Component can't use getInitialState in React

I'm tring the ES6 syntax in React, and write the components like:

export default class Loginform extends React.Component {
getInitialState() {
return {
name: '',
password: ''
};
};
}

but the browser throws me a waring about:

Warning: getInitialState was defined on Loginform, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

I can handle it with the traditional syntax var Loginform = React.createClass but what's correct ES6 syntax?

Another little thing, I think in traditional syntax React.createClass is an object, so the functions in it is separated by comma, but with the extends class it require semicolon, I don't understand it well.

35568 次浏览
小开
最佳答案

You don't need semicolons or commas between ES6 class method declarations.

For ES6 classes, getInitialState has been deprecated in favor of declaring an initial state object in the constructor:

export default class Loginform extends React.Component {
constructor(props, context) {
super(props, context);


this.state = {
name: '',
password: ''
};
};
}
小开

ES6 example: state, defaultProps, propTypes

import React from 'react'
import ReactDom from 'react-dom';
export default class Item extends React.Component{
constructor(props){
super(props);
this.state = {
check:false,
};
this.click=this.click.bind(this);
}
click(){
this.setState({check:true});
}
render(){
const text=this.state.check?'yes':'no';
return(<div onClick={this.click}>{this.props.name} : <b>{text}</b></div>)
}


}


Item.defaultProps={
comment:"default comment",
};
Item.propTypes={
name:React.PropTypes.string.isRequired,
};
小开

If we use class field, following is working.

state = {
name: '',
password: ''
}

This can be used instead of 

constructor(props, context) {
super(props, context);


this.state = {
name: '',
password: ''
};
};

提交答案