1、首先是TableList这个类，相当于一个组件类。
2、组件类，页面显示找到方法render(){}这个方法。
3、针对render()里面的return()是整个页面的显示。
4、<PageHeaderWrapper title=”查询表格”></PageHeaderWrapper>引入面包屑，加入标题对应页面的查
询表格。
5、<Card bordered={false}></Card>。
6、三个<div>标签：
a): 首先是一个大的div， <div className={styles.tableList}></div>，这是把TableList.less中的样式加进来；
b): 嵌入的第一个div， <div className={styles.tableListForm}> {this.renderForm()}</div>，这个div会调用this.renderForm()这方法，这个方法就是TableList中定义的一个方法
renderForm() {
const { expandForm } = this.state;//其中这一句代表着获取state中的expandForm属性的值
//如果expandForm这个值为false时候，将加载this.renderSimpleForm()这个方法
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
}在TableList中定义了一个state这个对象，并且初始化一些参数值，由此可以知道 expandForm: false,初始化为false;
class TableList extends PureComponent {
state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
}c)：当expandForm:的值为false的时候，就会执行这个方法this.renderSimpleForm();
renderSimpleForm() {
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="规则名称">
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="使用状态">
{getFieldDecorator('status')(
<Select placeholder="请选择" style={{ width: '100%' }}>
<Option value="0">关闭</Option>
<Option value="1">运行中</Option>
</Select>
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置
</Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
展开 <Icon type="down" />
</a>
</span>
</Col>
</Row>
</Form>
);
}
对应的页面就是未展开的检索条件输入
获取当前属性的参数的值
当输入检索条件时，这个form表单会执行
看一下handleSearch()这个方法，
handleSearch = e => {
e.preventDefault(); //preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
const { dispatch, form } = this.props; //获取当前属性中的dispatch、form属性
console.log(this.props);//可以执行这个方法，在控制台打印
form.validateFields((err, fieldsValue) => { //form表单自定义的方法
console.log("测试输出："+fieldsValue.name+";"+fieldsValue.status);//控制台打印属性的值
if (err) return;
const values = {
...fieldsValue,
updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
};
this.setState({
formValues: values,
});
dispatch({
type: 'rule/fetch',
payload: values,
});
});
};
控件的作用：
https://ant.design/components/form-cn/
import { queryRule, removeRule, addRule, updateRule } from '@/services/api';
export default {
namespace: 'rule',
state: {
data: {
list: [],
pagination: {},
},
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryRule, payload);//yield call(queryRule, payload) ：queryRule 表示调用了services/api.js 的queryRule， payload 表示传递的参数。
yield put({
type: 'save',
payload: response,
});
},
// handleAdd = fields => {
// const { dispatch } = this.props;
// dispatch({
// type: 'rule/add',
// payload: {
// desc: fields.desc,
// },
// });
// message.success('添加成功');
// this.handleModalVisible();
// }
*add({ payload, callback }, { call, put }) {
const response = yield call(addRule, payload); //addRule 表示调用了services/api.js addRule payload 表示传递的参数。
yield put({ //demo 中的请求都是通过mock来模拟后端的返回数据。这里的请求对应的mock文件是mock/rule.js
type: 'save',
payload: response,
});
if (callback) callback();
},
*remove({ payload, callback }, { call, put }) {
const response = yield call(removeRule, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
*update({ payload, callback }, { call, put }) {
const response = yield call(updateRule, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
},
reducers: {
save(state, action) {
return {
...state,
data: action.payload,
};
},
},
};
export async function queryRule(params) {
return request(`/api/rule?${stringify(params)}`);
}
state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激
活的路由，被选中的标签，是否显示加载动效或者分页器等等。
要想更新 state 中的数据，你需要发起一个 action。Action 就是一个普通 JavaScript 对象（注意到
没，这儿没有任何魔法？）用来描述发生了什么
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store
中。
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过
store.dispatch() 将 action 传到 store。
Action 处理
现在我们已经确定了 state 对象的结构，就可以开始开发 reducer。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
Store 就是把它们联系到一起的对象。Store 有以下职责：
action：行为 它是一个对象 里面必有type来指定其类型 这个类型可以理解为你要做什么，reducer要根据action的type来返回不同的state 每个项目有且可以有多个action
store： store本质上是一个状态树，保存了所有对象的状态。任何UI组件都能直接的从store访问特定对象的状态。每个项目有且只能有一个store
脑子里有了这些基本的概念后我们就可以把reducer放到createStore里并创建好store了
https://segmentfault.com/a/1190000015684895
第二个<div>，当点击新建的时候，会执行onClick={() => this.handleModalVisible(true)这个方法，这个方法有个参数，定义为true，看一下这个方法，这个代表着把modalVisible这个值改为true，相当于把此时的状态发生了改变，来看一下最初这个值，最初这个值被初始化为false，
handleModalVisible = flag => {
this.setState({
modalVisible: !!flag,
});
};
执行添加方法
handleAdd = fields => {
const { dispatch } = this.props;
dispatch({
type: 'rule/add',
payload: {
desc: fields.desc,
},
});
message.success('添加成功');
this.handleModalVisible();
};
