世界上最伟大的投资就是投资自己的教育
src/components/App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addReminder } from '../actions';
class App extends Component {
constructor(props) {
super(props)
this.state = {
text: ''
};
}
addReminder() {
this.props.addReminder(this.state.text);
}
renderReminders() {
const { reminders } = this.props;
return (
<ul className="list-group col-sm-8 mt-2">
{
reminders.map(reminder => {
return (
<li key={ reminder.id } className="list-group-item">
<div className="list-item">
<div>{ reminder.text }</div>
<div><em>time</em></div>
</div>
</li>
);
})
}
</ul>
);
}
render() {
return (
<div className="App">
<div className="title">Reminder Pro</div>
<div className="form-inline">
<div className="form-group mr-2">
<input
type="text"
className="form-control"
placeholder="I have to..."
onChange={ (event) => this.setState({text: event.target.value}) }
/>
</div>
<button
type="button"
className="btn btn-success"
onClick={ () => this.addReminder() }
>
Add Reminder
</button>
</div>
{ this.renderReminders() }
</div>
);
}
}
const mapStateToProps = (state) => {
return {
reminders: state
};
};
export default connect(mapStateToProps, { addReminder })(App);
src/actions/index.js
import { ADD_REMINDER } from '../constants';
export const addReminder = (text) => {
return {
type: ADD_REMINDER,
text
}
};
src/reducers/index.js
import { ADD_REMINDER } from '../constants';
const reminder = (action) => {
return {
text: action.text,
id: Math.random()
}
};
const reminders = (state = [], action = {}) => {
switch(action.type) {
case ADD_REMINDER:
return [
...state,
reminder(action)
]
default: return state;
}
}
export default reminders;
07:031FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #1 项目免费视频教程搭建
09:45FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #2 显示列表
04:233FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #3 处理时间
05:574FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #4 删除 reminder
04:365FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #5 保存数据到 cookies(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号