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页面

todolist拆分为逻辑页面和ui页面

猜你喜欢