todolist拆分爲邏輯頁面和ui頁面

咱們能夠把Todolist 繼續拆分 ，拆分爲邏輯頁面和ui頁面

ui 頁面

import React, { Component } from 'react';import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'import { DatePicker } from 'antd';import { Input ,Button,List} from 'antd';class TodoListUi extends Component { render() { return ( <React.Fragment> <h3 style={{ marginBottom: 16 }}>TodoList</h3> <Input value={this.props.inputValue} placeholder="todolist輸入框" style={{width:"300px","marginRight":"10px"}} onChange={this.props.handleChangeInput} /> <Button type="primary" onClick={this.props.handleChangeButton}>提交</Button> <List style={{width:"300px"}} bordered dataSource={this.props.list} renderItem={(item,index) => (<List.Item onClick={(index)=>{this.props.deleteItem(index)}}>{item}</List.Item>)} /> </React.Fragment> ) }}export default TodoListUi;

 

 

記得 咱們這裏的數據和方法要從 父組件傳過來，也就是原來的 邏輯頁面傳遞過來 ，

傳遞過來 的數據 ，要這麼寫 this.props.數據

傳遞過來的方法 ，要這麼寫 this.props.方法

若是方法有參數，就使用es6 語法

renderItem={(item,index) => (<List.Item onClick={(index)=>{this.props.deleteItem(index)}}>{item}</List.Item>)}

邏輯頁面

import React, { Component } from 'react';import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'import { DatePicker } from 'antd';import { Input ,Button,List} from 'antd';import store from './store/index'import {getInputChangeAction, getAddItemAction ,getDeleteItemAction} from './store/actionCreators'import {CHANGE_INPUT_VALUE,ADD_ITEM,DELETE_ITEM} from './store/actionType'import TodoListUi from './store/TodoListUi'class App extends Component { constructor(props) { super(props); this.state=store.getState(); this.handleChangeInput = this.handleChangeInput.bind(this); this.handleChange = this.handleChange.bind(this); this.handleChangeButton= this.handleChangeButton.bind(this); this.deleteItem = this.deleteItem.bind(this); store.subscribe(this.handleChange); } render() { return ( <TodoListUi inputValue = {this.state.inputValue} list = {this.state.list} handleChangeInput = {this.handleChangeInput} handleChangeButton = {this.handleChangeButton} deleteItem = {this.deleteItem} /> ); } handleChangeInput(e) { const action = getInputChangeAction(e.target.value); store.dispatch(action); }; handleChange(e) { this.setState(store.getState()) } handleChangeButton() { const action = getAddItemAction(); store.dispatch(action); } deleteItem(index) { const action = getDeleteItemAction(index); store.dispatch(action); }}

export default App;

1.首先咱們要引入咱們寫的ui頁面2。將數據和方法重寫，傳遞給ui頁面

<TodoListUi inputValue = {this.state.inputValue} list = {this.state.list} handleChangeInput = {this.handleChangeInput} handleChangeButton = {this.handleChangeButton} deleteItem = {this.deleteItem} />