上一小节:【Redux学习-4】重构和优化代码
目标
将NeedDoneList
的UI实现和逻辑实现分离
方法
将NeedDoneList
的render函数中的UI实现单独抽象为一个Component,命名为NeedDoneListUI.js
,在这个子组件中调用父组件的属性。
//NeedDoneListUI.js
import React, { Component } from 'react';
import {Input, Button, List} from 'antd';
class NeedDoneListUI extends Component {
render() {
return (
<div style={{margin: '10px'}}>
<div>
<Input
placeholder={this.props.inputValue}
style={{width:'250px', marginRight:'10px'}}
onChange={this.props.handleInputChange}
value={this.props.inputValue}
/>
<Button
type="primary"
onClick={this.props.clickBtn}
>confirm</Button>
</div>
<div style={{margin: '10px',width: '300px'}}>
<List bordered
dataSource={this.props.list}
renderItem={(item, index)=>
(<List.Item
onClick={(e)=>{e.stopPropagation();this.props.deleteItem(index)}}>{item}
</List.Item>)}>
</List>
</div>
</div>
);
}
}
export default NeedDoneListUI;
render() {
return (
<NeedDoneListUI
inputValue = {this.state.value}
handleInputChange = {this.handleInputChange}
clickBtn={this.handleBtnClick}
list = {this.state.data}
deleteItem = {this.handleDeleteItemClick}
/>
);
}