zoukankan      html  css  js  c++  java
  • React之UI组件(将render部分的JSX模板拆分出来)和容器组件 (拆分JSX后剩余的逻辑部分)

    UI组件

    // TodoListUI.js
    
    import React, { Component } from 'react'
    import 'antd/dist/antd.css'
    import { Input, Button, List } from 'antd'
    
    class TodoListUI extends Component {
      render () {
        return (
          <div style={{marginTop: '10px', marginLeft: '10px'}}>
            <div>
              <Input
                value={this.props.inputValue}  
                placeholder='todo info' 
                style={{ '300px', marginRight: '10px'}} 
                onChange={this.props.handleInputChange}
              />
              <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
            </div>
            <List
              style={{marginTop: '10px',  '300px'}}
              bordered
              dataSource={this.props.list}
              renderItem={(item, index) => (<List.Item onClick={(index) => {this.props.handleItemDelete(index)}} >{item}</List.Item>)}
            />
          </div>
        )
      }
    }
    
    export default TodoListUI
    
    

    容器组件

    // TodoList.js
    
    import React, { Component } from 'react'
    import store from './store'
    import {getInputChangeAction , getAddItemAction, getDeleteItemAction } from './store/actionCreator'
    import TodoListUI from './TodoListUI'
    
    class TodoList extends Component {
      constructor (props) {
        super(props)
        this.state = store.getState()
        console.log(this.state )
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
        store.subscribe(this.handleStoreChange)
      }
    
      componentDidMount () {
        console.log(1111111)
      }
    
      render () {
        return (
          <TodoListUI 
            inputValue = {this.state.inputValue}
            list = {this.state.list}
            handleInputChange = {this.handleInputChange}
            handleBtnClick = {this.handleBtnClick}
            handleItemDelete = {this.handleItemDelete}
          />
        )
      }
    
      handleInputChange (e) {
        // const action = {
        //   type: CHANGE_INPUT_VALUE,
        //   value: e.target.value
        // }
        // 将action拆分出去通过函数获取
        const action = getInputChangeAction(e.target.value)
        console.log(e.target.value)
        store.dispatch(action)
      }
    
      handleStoreChange () {
        console.log('store_change')
        this.setState(store.getState())
      }
    
      handleBtnClick () {
        // const action = {
        //   type: ADD_TODO_ITEM
        // }
        const action = getAddItemAction()
        store.dispatch(action)
      }
    
      handleItemDelete (index) {
        // const action = {
        //   type: DELETE_TODO_ITEM,
        //   index
        // }
        const action = getDeleteItemAction(index)
        store.dispatch(action)
        // alert(index)
      }
    }
    
    export default TodoList
    
    
    今天你学习了吗!!!
  • 相关阅读:
    Redis详解
    Redis详细介绍
    memcache数据组织
    memcache细节解析
    memcached命令和配置
    PHP的Cookie、Session和跟Laravel相关的几点了解
    Session机制
    Cookie和Session详解
    Apache的Directory配置指南
    [C语言](二)01 获取Windows图形构件大小信息
  • 原文地址:https://www.cnblogs.com/nayek/p/12383115.html
Copyright © 2011-2022 走看看