实习12.4（dva）

组件传值

总结： 子组件传值给父组件
思想是回调函数：
也就是在父组件中，设置一个函数，这个函数就是操作回调的数据

父子组件之间的传值

父组件向子组件传值是极为简单的，this.props就能实现，具体实现方式为：
//子组件
//在子组件中直接用this.props.dataPlaceholder将值传递过来并且用placeholder接收
class InputComponent extends Component {

render() {
return(
<Input style = { InputStyle } placeholder={this.props.dataPlaceholder} onChange={this.props.onChange} onBlur={this.props.inputOnBlur}/>
)
}
}

export default InputComponent;

//父组件
//父组件中定义一个名为dataPlaceholder的自定义属性
class NewCouponName extends Component {

render() {
// const { onChange }
return(

*名称

)
}
}

export default NewCouponName
子组件向父组件传值
//父组件
//在父组件中要写一个方法来接收子组件传过来的值

// 接收搜索的函数
handleSearchValue(params){
let searchData = this.state.searchData;
const pagination = { …this.state.pagination }
this.setState({
pagination:{
current:1,
},
page:1,
searchData:{
…params,
}
},()=>{
let {searchData } = this.state;
this.getData({
pageSize: pagination.pageSize,
page: 1,
…searchData,
});
});
}

//子组件
//子组件在获取值的时候，调用父组件传过来的方法，并将获取的值传递过去

handleSearch = (e) => {
e.preventDefault();
this.props.form.validateFields((err, value,) => {
if (err) {
return;
}
// 将子组件search文件中的值，传给父组件
this.props.handleSearchValue({
…values,
})
});

}

DVA

基于redux，redux-saga和react-router的轻量级前端框架。

定义路由

路由可以想象成是组成应用的不同页面。

ui组件

多个页面分享UI元素（或在一个页面使用多次），在dva里你可以把这部分抽成组件。

es6

x => x * x
上面的箭头函数相当于：
function (x) {
return x * x;
}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：

x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}

如果参数不是一个，就需要用括号()括起来：

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, …rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}

render

一遇到render就开始渲染render下的东西

附录

今天下午做的dva的修改，要回头再看一看项目