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