世界上最伟大的投资就是投资自己的教育
剧场模式
src/components/App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addReminder } from '../actions';
import PropTypes from 'prop-types';
import moment from 'moment';
class App extends Component {
constructor(props) {
super(props)
this.state = {
text: '',
dueDate: ''
};
}
addReminder() {
this.props.addReminder(this.state.text, this.state.dueDate);
}
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>{ moment(new Date(reminder.dueDate)).fromNow() }</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 mr-2"
placeholder="I have to..."
onChange={ (event) => this.setState({text: event.target.value}) }
/>
<input
type="datetime-local"
className="form-control"
onChange={ (event) => this.setState({dueDate: event.target.value}) }
/>
</div>
<button
type="button"
className="btn btn-success"
onClick={ () => this.addReminder() }
>
Add Reminder
</button>
</div>
{ this.renderReminders() }
</div>
);
}
}
App.propTypes = {
reminders: PropTypes.array.isRequired,
addReminder: PropTypes.func.isRequired
}
src/actions/index.js
import { ADD_REMINDER } from '../constants';
export const addReminder = (text, dueDate) => {
return {
type: ADD_REMINDER,
text,
dueDate
}
};
课程目录
07:031FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #1 项目免费视频教程搭建
09:452FreeReact & Redux 实战 Reminder Pro 项目免费视频教程 #2 显示列表
04:23FreeReact & 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号
请问这个 action,action.text 分别代表什么?
const reminder = (action) => {
return {
text: action.text,
id: Math.random()
}
};
action 是个对象,text 是里面的内容,你要这样理解,别的地方调用 reminder 方法后,传的值都会在 action 中可以取到,比如传值 "text: 2", 或别的,那取的时候可以就可以用 action.text 取出来了