提一个需求，比如我们做一个简单的todolist，功能包含获取输入框值，添加list，删除list，展示list这四个功能，这四个功能需要触发三个事件 getInputValue(),getAddValue(),getdeleteValue(),使用箭头函数第一个好处就是不需要考虑this指向问题，箭头函数用起来就是这么方便，省的我们还得去像这样this.getInputValue.bind(this)绑定。而且这样也不利于我们去传参。
建议大家在JSX中声明函数使用箭头函数
下面是示例代码，并没有展示在models中的代码，但是这里仅仅是强调箭头函数的好处。
import Reactfrom 'react';
import { Input,Button,List }from 'antd';
import {connect }from 'dva';
import './list.css'
class TodoListextends React.Component{
//获取输入的数据
handleInputChange(e){
this.props.dispatch({
type:'list/getInputValue',
payload: e.target.value,
})
}
//添加数据
handleAddChange(){
this.props.dispatch({
type:'list/getAddValue',
payload:this.props.inputValue,
})
}
//删除事件
handleDeleteChange(index) {
this.props.dispatch({
type:'list/getDeleteValue',
payload:index,
})
}
render(){
return(
<Input placeholder="Basic usage"
style={{width:'350px',marginTop:'20px',marginLeft:'20px'}}
onChange={(e)=>{this.handleInputChange(e)}}
value={this.props.inputValue}
/>
<Button type="primary" style={{marginLeft:'10px'}}
onClick={()=>{this.handleAddChange()}}>添加
style={{width:'300px',marginLeft:'20px',marginTop:'10px'}}
bordered
dataSource={this.props.list}
renderItem={(item,index) => (
<List.Item onClick={()=>{this.handleDeleteChange(index)}}>{item}
)}
/>
)
}
}
const mapToStateProps = (state)=>{
return{
list:state.list.list,
inputValue:state.list.inputValue,
}
}
export default connect(mapToStateProps) (TodoList);
最后这个实例的代码已经上传到github上，欢迎大家git。
