初始化state
/**
* 每个react类都需要一个构造函数 并且它必须要调用super(props)
* @param props
*/
constructor(props) {
super(props);
// 设置状态机初始化状态 state里面原则上只存放和界面渲染有关的对象,因为在每一次调用setState的时候,整个dom树都会被重绘
// state 的取值方法为 let dates = this.state.form.dates
// 但是设置值不能直接使用 this.state.form.dates = dates,需要使用setState ,
// 需要注意的是setState 是异步动作,所以如果需要在设置值完毕之后进行什么动作需要写到回调函数中 this.setState({A:1},()=> { todoSomeThing()})
this.locked = false
this.state = {
form: {
// 查询条件
dates: [null, null],
fileName: '',
},
loading: false
};
this.fileList = []
}
修改state
修改state值的方法:
1.对于简单的state 对象改变其中值可以直接使用 this.setState({A:1}),
2. 但是对于复杂的对象,比如嵌套对象,或者只想修改一个对象中的某个属性,
2.1 借助Object.assign 实现对数据的部分修改
let newForm = Object.assign({},this.state.form,{fileName :'222'})
this.setState({form:newForm})
2.2 直接修改源对象 并调用setState
this.state.form.fileName = '222'
this.setState({form:this.state.form})
完整代码
import React from 'react';
import {Button, DateRangePicker, Form, Input, Message} from 'element-react';
import './Video.css';
import {api} from './VideoApi';
class VideoSearch extends React.Component {
static defaultProps = {
pageNo: 0,
pageSize: 0
}
/**
* 每个react类都需要一个构造函数 并且它必须要调用super(props)
* @param props
*/
constructor(props) {
super(props);
// 设置状态机初始化状态 state里面原则上只存放和界面渲染有关的对象,因为在每一次调用setState的时候,整个dom树都会被重绘
// state 的取值方法为 let dates = this.state.form.dates
// 但是设置值不能直接使用 this.state.form.dates = dates,需要使用setState ,
// 需要注意的是setState 是异步动作,所以如果需要在设置值完毕之后进行什么动作需要写到回调函数中 this.setState({A:1},()=> { todoSomeThing()})
this.locked = false
this.state = {
form: {
// 查询条件
dates: [null, null],
fileName: '',
},
loading: false
};
this.fileList = []
}
// 组件挂载完毕之后调用查询
componentDidMount() {
this.doSearch()
}
render() {
return (
<div className="searchCls">
<Form inline={true} model={this.state.form} labelWidth="80"
// 为什么要调用bind
// 如果不通过 this[methodName]bind(this)的方式绑定函数,那么会遇到this指向的问题
// 此时的方案是定义方法如下
// doSearch = (e)=>{ todoSomething},如果定义为 doSearch(e){} 那么调用方法的时候会出现找不到该方法的错误
onSubmit={this.doSearch.bind(this)}>
<Form.Item label="文件名称">
<Input value={this.state.form.fileName}
placeholder="请输入文件名称"
onChange={this.onChange.bind(this, 'fileName')}></Input>
</Form.Item>
<Form.Item label="上传时间">
<DateRangePicker size="small"
value={this.state.form.dates}
placeholder="请选择日期范围"
onChange={this.onChange.bind(this, 'dates')}
/>
</Form.Item>
<Form.Item>
<Button nativeType="submit" type="primary" icon="search" size="small">搜索</Button>
<Button icon="delete2" onClick={this.doClear.bind(this)} size="small">清空</Button>
</Form.Item>
</Form>
</div>
)
}
/**
* 执行查询动作 触发父组件的查询
*/
doSearch(e) {
if (this.locked) {
Message.warning('请勿频繁操作!')
return
}
if (e) {
// 阻止默认事件传播 此处是阻止表单默认的提交事件
e.preventDefault();
}
// 构建查询条件
const sr = {
fileName: this.state.form.fileName || '',
startTime: this.state.form.dates[0] || '',
endTime: this.state.form.dates[1] || '',
fileTypes: 'mp4',
}
// 执行查询
api.page(this.props.pageNo, this.props.pageSize, sr).then(resp => {
this.doAfterSearch(resp)
})
}
/**
* 查询之后的操作
* @param resp
*/
doAfterSearch(resp) {
this.props.afterSearch(resp)
}
doClear() {
// 修改state值的方法:
// 1.对于简单的state 对象改变其中值可以直接使用 this.setState({A:1}),
// 2. 但是对于复杂的对象,比如嵌套对象,或者只想修改一个对象中的某个属性,
// 2.1 借助Object.assign 实现对数据的部分修改
// let newForm = Object.assign({},this.state.form,{tollgateName:'222'})
// this.setState({form:newForm})
// 2.2 直接修改源对象 并调用setState
// this.state.form.tollgateName = '222'
// this.setState({form:this.state.form})
this.locked = true
this.setState({
form: {
dates: [null, null],
fileName: '',
}
}, () => this.locked = false)
}
onChange(key, value) {
this.state.form[key] = value;
// 强制重新渲染组件 忽略shouldComponentUpdate
this.forceUpdate();
}
}
export default VideoSearch