像原来的代码:
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store/index.js';
import {
getInputChangeAction,
getAddItemAction,
getDeleteItemAction
} from './store/actionCreators';
class BeautifulToDoList extends Component {
constructor(props) {
super(props);
this.state = store.getState();
this.handleInputChange = this.handleInputChange.bind(this);
this.handleStoreChange = this.handleStoreChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
store.subscribe(this.handleStoreChange);
}
render() {
return (
<div style={{marginTop: '10px',marginLeft: '10px'}}>
<Input
value={this.state.inputValue}
placeholder="todo info"
style={{width: 300, marginRight: '10px'}}
onChange={this.handleInputChange}
/>
<Button
type="primary"
onClick={this.handleBtnClick}
>提交</Button>
<List
style={{marginTop: '10px', width: '300px'}}
bordered
dataSource={this.state.list}
renderItem={(item, index) => (<List.Item onClick={this.handleItemClick.bind(this, index)}>{item}</List.Item>)}
/>
</div>
)
}
handleInputChange(e) {
const action = getInputChangeAction(e.target.value);
store.dispatch(action);
}
handleStoreChange() {
this.setState(store.getState());
}
handleBtnClick() {
const action = getAddItemAction();
store.dispatch(action);
}
handleItemClick(index) {
const action = getDeleteItemAction(index);
store.dispatch(action);
}
}
export default BeautifulToDoList;
我们把 结构样式 与业务逻辑 写在一起。有点眼花缭乱。
可以把它拆分,把结构样式放一个文件,业务逻辑放一个文件。前者叫UI组件,后者叫容器组件。
好。我们新建一个TodoListUI.js 文件,将上面前端展示部分放进来,如下。
import React, {Component} from 'react';
class TodoListUI extends Component {
render() {
return (
<div style={{marginTop: '10px',marginLeft: '10px'}}>
<Input
value={this.state.inputValue}
placeholder="todo info"
style={{width: 300, marginRight: '10px'}}
onChange={this.handleInputChange}
/>
<Button
type="primary"
onClick={this.handleBtnClick}
>提交</Button>
<List
style={{marginTop: '10px', width: '300px'}}
bordered
dataSource={this.state.list}
renderItem={(item, index) => (<List.Item onClick={this.handleItemClick.bind(this, index)}>{item}</List.Item>)}
/>
</div>
)
}
}
export default TodoListUI;
然后,再在原 BeautifulToDoList.js 文件中删掉render 中的内容,并进行如下修改。
import React, {Component} from 'react';
import store from './store/index.js';
import {
getInputChangeAction,
getAddItemAction,
getDeleteItemAction
} from './store/actionCreators';
import TodoListUI from './TodoListUI';
class BeautifulToDoList extends Component {
constructor(props) {
super(props);
this.state = store.getState();
this.handleInputChange = this.handleInputChange.bind(this);
this.handleStoreChange = this.handleStoreChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
store.subscribe(this.handleStoreChange);
}
render() {
return (
<TodoListUI
inputValue={this.state.inputValue}
list={this.state.list}
handleInputChange={this.handleInputChange}
handleBtnClick={this.handleBtnClick}
handleItemClick={this.handleItemClick}
/>
)
}
handleInputChange(e) {
const action = getInputChangeAction(e.target.value);
store.dispatch(action);
}
handleStoreChange() {
this.setState(store.getState());
}
handleBtnClick() {
const action = getAddItemAction();
store.dispatch(action);
}
handleItemClick(index) {
const action = getDeleteItemAction(index);
store.dispatch(action);
}
}
export default BeautifulToDoList;
然后相应修改一下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'}}>
<Input
value={this.props.inputValue}
placeholder="todo info"
style={{width: 300, marginRight: '10px'}}
onChange={this.props.handleInputChange}
/>
<Button
type="primary"
onClick={this.props.handleBtnClick}
>提交</Button>
<List
style={{marginTop: '10px', width: '300px'}}
bordered
dataSource={this.props.list}
renderItem={(item, index) => (<List.Item onClick={() => {this.props.handleItemClick(index)}}>{item}</List.Item>)}
/>
</div>
)
}
}
export default TodoListUI;