初探react之state

初始化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