class Task extends React.Component {
constructor(props) {
super(props);
this.state = {edit: false};
this.editor = this.editor.bind(this);
this.noEditor = this.noEditor.bind(this);
}
editor() {
this.setState ({edit:true})
}
noEditor() {
this.setState ({edit:false})
}
save() {
var value = this.refs.head.value;
var value = this.refs.body.value;
}
renderNorm() {
return (
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">{this.props.children[0]}</span>
<p>{this.props.children[1]}</p>
</div>
<div className="card-action">
<a href="#" onClick={this.editor}>Редактировать</a>
<a href="#">Удалить</a>
</div>
</div>
)
}
renderChange() {
return (
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<input type="text" ref='head' placeholder={this.props.children[0]} />
<input type="text" ref='body' placeholder={this.props.children[1]} />
</div>
<div className="card-action">
<a href="#" onClick={this.noEditor}>Сохранить</a>
</div>
</div>
)
}
render() {
if(this.state.edit) {
return this.renderChange();
}
else {
return this.renderNorm();
}
}
};
class Wrap extends React.Component {
constructor(props) {
super(props);
this.state = { tasks: [
['Первый', 'gkkk'],
['Второй', 'gkkk']
]};
this.updateText = this.updateText.bind(this);
this.deleteBlock = this.deleteBlock.bind(this);
this.updateText = this.updateText.bind(this);
}
deleteBlock(i) {
var arr = this.state.tasks;
arr.splice(i, 1);
this.setState ({tasks: arr});
}
updateText(text, i) {
var arr = this.state.tasks;
arr[i] = text;
this.setState ({tasks: arr});
}
eachTask(item, i) {
return (<Task key={i} index={i} update={this.updateText}>
{item}
</Task>
)
}
render() {
return (
<div className="card_wrap">
{
this.state.tasks.map(this.eachTask)
}
</div>
)
}
}
const way = document.querySelector('#example');
ReactDOM.render(<Wrap />, way);$articles = [
[
'id' => 'url статьи',
'h' => 'Заголовок',
'text' => 'Текст статьи',
]
....
];<a class="card" href="">
....
</a>