Государства в Реагировании с использованием ES6 и ES7

82
12

Во многих примерах, которые я вижу для управления состоянием внутри реагирующего компонента, вам придется использовать getInitialState, например, в этом примере.

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

Но в синтаксисе ES6 с использованием getInitalState() больше не будет работать. Итак, как вы управляете состоянием в реагирующем компоненте с использованием синтаксиса ES6?

Примером является

// Future Version
export class Counter extends React.Component {
static propTypes = { initialCount: React.PropTypes.number };
static defaultProps = { initialCount: 0 };
state = { count: this.props.initialCount };
tick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}

благодаря

спросил(а) 2016-02-26T23:26:00+03:00 4 года, 7 месяцев назад
1
Решение
113

в ES6 команда React решила, что более идиоматическим способом инициализации состояния было просто сохранить его в настройке переменных экземпляра в конструкторе. Это означает, что вы можете реорганизовать свой метод getInitialState, переместив его возвращаемое значение, которое будет назначено переменной экземпляра this.state в конструкторе вашего класса.

import React, { Component } from 'react';

class LikeButton extends Component {
constructor() {
super();
this.state = { liked : false };
this.handleClick = this.handleClick.bind(this)
}

handleClick() {
this.setState({
liked : !this.state.liked
});
}

render() {
const text = this.state.liked ? 'like' : 'haven\'t liked';

return (
<p onClick={this.handleClick}>{'You ${text} this. Click to toggle.'}</p>
);
}
}

ПРИМЕЧАНИЕ. Вы должны привязать свои методы к экземпляру компонента

в ES6+ вы можете использовать функцию инициализаторов свойств

import React, { Component } from 'react';

class LikeButton extends Component {
state = {
liked : false
}

render() {
const text = this.state.liked ? 'like' : 'haven\'t liked';
const handleClick = ()=>{
this.setState({
liked : !this.state.liked
});
}

return (
<p onClick={this.handleClick}>{'You ${text} this. Click to toggle.'}</p>
);
}
}

ПРИМЕЧАНИЕ. Это предложение этапа 0.

ПРИМЕЧАНИЕ. Я handleClick constructor так, чтобы он определял handleClick как вложенную функцию внутри render

Refrences: Реагировать на официальные документы/статью

ответил(а) 2016-02-27T00:56:00+03:00 4 года, 7 месяцев назад
58

В ES6 вы инициализируете состояние в конструкторе. то есть:

constructor(props) {
super(props)
this.state = {} //or whatever
}

Вы можете прочитать больше в официальных документах

ответил(а) 2016-02-27T00:42:00+03:00 4 года, 7 месяцев назад
-4

Я думаю, что проблема, возможно, связана с текстом внутри <p>. Попробуйте этот код для размера:

const LikeButton = React.createClass({
getInitialState() {
return {
liked : false
};
},

handleClick() {
this.setState({
liked : !this.state.liked
});
},

render() {
const text = this.state.liked ? 'like' : 'haven\'t liked';

return (
<p onClick={this.handleClick}>{'You ${text} this. Click to toggle.'}</p>
);
}
});

ответил(а) 2016-02-27T00:02:00+03:00 4 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема