《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新

世界上最伟大的投资就是投资自己的教育

剧场模式
首页前端ReduxReact & Redux 实战 Reminder Pro 项目 免费视频教程

React & Redux 实战 Reminder Pro 项目免费视频教程 #3 处理时间

求知小风 · 元婴发布于
3

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
  }
};
2 条回复
  • YesAlex · 金仙
    YesAlex · 金仙 #1

    请问这个action,action.text分别代表什么?

    const reminder = (action) => {
    return {
    text: action.text,
    id: Math.random()
    }
    };

  • 求知小风 · 元婴

    action 是个对象,text 是里面的内容,你要这样理解,别的地方调用 reminder 方法后,传的值都会在 action 中可以取到,比如传值 "text: 2", 或别的,那取的时候可以就可以用 action.text 取出来了

热门课程 love
喜欢
微信群讲师微信知乎服务号github视频号
程序员随风
学员(73)
fruitsdrink · 道祖vaveee@qq.com · 道祖taosui · 道祖RichardTibco · 真仙evilming · 真仙JesusCracker · 道祖Arthur · 道祖biantonghai · 太乙招财大胖菊 · 道祖风林火山 · 练虚温文尔雅 · 道祖思航💗 · 大乘
最新动态
fruitsdrink · 道祖学习到了4:06
vaveee@qq.com · 道祖学习到了0:00
taosui · 道祖学习到了4:25
RichardTibco · 真仙学习到了4:34
evilming · 真仙学习到了4:13
统计信息
    学员: 19832
    视频数量: 1241
    帖子数量: 443

© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1126

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top