Пытался сделать, удаление сообщений, но почему-то происходит сброс рейтинга (лайков), не могу понять почему
Однако при добавлении сообщения или удаления, сбрасываются счетчики
Я вроде догадываюсь почему так, но не могу понять, почему не по ссылке объект с сообщениями хранится
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>САПР</title>
</head>
<body>
<style>
* {margin: 2px;}
</style>
<div id="jsx"></div>
<script src="lib.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
var MessageBox = React.createClass({
deleteMessage: function(message){
var list = _.remove(this.state.message, {
value: message
});
list = _.without(this.state.message, message);
this.setState({
message: list
})
},
addMessage: function(){
var node = this.refs.newMessageText.getDOMNode();
var newMessage = node.value;
node.value="";
this.state.message.push({value: newMessage, increment: 0});
this.setState({
message: this.state.message
})
},
getInitialState: function() {
return {
visible: true,
message: [
{value: 'mes1', increment: 0},
{value: 'mes2', increment: 0},
{value: 'mes3', increment: 0}
]
};
},
render: function(){
var message = this.state.message.map(function(message){
return (
<SubMessage
title='titlebest'
list={message.value}
increment={message.increment}
onDelete={this.deleteMessage}
></SubMessage>
)
}.bind(this));
return (
<div>
<h1>{this.props.text}</h1>
{ message }
<input ref="newMessageText" text="text" placeholder="добавить сообщение" />
<button onClick={this.addMessage}>Добавить сообщение</button>
</div>
);
}
});
var SubMessage = React.createClass({
handleDelete: function(){
console.log(this.props)
this.props.onDelete(this.props.list)
},
plus: function(){
console.log(this.props)
this.setState({
increment: this.props.increment++
})
},
getDefaultProps: function(){
return {
title: 'название'
}
},
render: function(){
return (
<p className="info">
<b>{this.props.title}</b> = {this.props.list}, рейтинг = {this.props.increment}
<button className="btn" onClick={this.plus}>+</button>
<button onClick={this.handleDelete}>Удалить</button>
</p>
);
}
});
var App = React.renderComponent(
<MessageBox text="test"></MessageBox>,
document.getElementById("jsx")
)
</script>
</body>
</html>
Простой