Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2019, 00:42
Интересующийся
Отправить личное сообщение для melnikov24 Посмотреть профиль Найти все сообщения от melnikov24
 
Регистрация: 24.08.2018
Сообщений: 12

виджет комментариев переделать с react на redux
вот этот код нужно переделать в redux с компонентами редьюсерами и так далее
долго уже пытаюсь никак не получаеться(

App.js

import React, { Component } from 'react'
import { format } from 'date-fns'
import 'bootstrap/dist/css/bootstrap.css'

class App extends Component {

state = {
comments: [],
form: {
name: '',
comment: ''
}
}

componentDidMount() {
if (localStorage.getItem('state')) {
this.setState({ ...JSON.parse(localStorage.getItem('state')) })
}
}

addComment = () => {
this.state.form.name = this.state.form.name.replace(/<[^>]+>/g,'');
this.state.form.comment = this.state.form.comment.replace(/<[^>]+>/g,'');
if (this.state.form.name.length === 0 || this.state.form.comment.length === 0) {alert('input error')}
else{

this.setState({



comments: [
...this.state.comments,
{
id: this.state.comments.length ? this.state.comments.reduce((p, c) => p.id > c.id ? p : c).id + 1 : 1, // max id +1
name: this.state.form.name,
comment: this.state.form.comment,
date: new Date()
}
],
form: {
name: '',
comment: ''
}
}, () => localStorage.setItem('state', JSON.stringify(this.state)))}

}


removeComment = (id) => {
this.setState({
comments: this.state.comments.filter(comment => comment.id !== id)
}, () => localStorage.setItem('state', JSON.stringify(this.state)))
}

handleChange = (e) => {
console.log(e.target.name)
this.setState({
form: {
...this.state.form,
[e.target.name]: e.target.value,
}
})
}

render() {
return (
<div className="App">

<div style={ {marginBottom: "20px"} }>
<label>Имя: <input

type="text"
value={this.state.form.name}
name="name"
onChange={this.handleChange} /></label><br />
<label>Коментарий:<br /> <textarea
name="comment"
value={this.state.form.comment}
onChange={this.handleChange}></textarea>
</label><br />
<button className="btn btn-primary btn-lg" onClick={this.addComment}
>Добавить комментарий</button>
</div>
{this.state.comments.map(comment => <div key={comment.id}>
<span style={{ fontStyle: 'italic'}, {paddingRight : '10px'}, {paddingDown: '10px'} }>{comment.id} - {format(comment.date, 'DD/MM/YYYY')}: </span>
<strong>{comment.name}, </strong>
<span style={ {paddingRight : '20px'} }>{comment.comment}</span>
<button onClick={this.removeComment.bind(null, comment.id)}>Удалить</button>
</div>)}
<br />
</div>
)
}
}

export default App

index.js

import React from 'react'
import {render} from 'react-dom'
import App from './components/App'

render(<App/>, document.getElementById('root'))
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2019, 11:51
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 576

https://github.com/reduxjs/redux/tre...examples/todos
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать виджет комментариев на react js melnikov24 Общие вопросы Javascript 2 30.11.2018 20:19
React + Redux не обновляется компонент при изменение store smegol Библиотеки/Тулкиты/Фреймворки 2 15.11.2017 14:07
Front-end разработчик на React (Redux) в международный проект. Eugen2k Работа 3 05.10.2017 11:25
Frontend Developer (JavaScript/HTML/CSS, React, Redux, Webpack), Москва. 160 гросс. Metelitsa Работа 0 23.08.2017 17:19
Виджет переделать в Плагин! Срочно! Это не долго) JDM jQuery 0 20.12.2013 21:19