增加过滤条件

这小节，我们会简单的使用antd的Card和Radio，还是一样的，你可以自己先尝试着，实现，如果你可以独立完成，那你就不需要阅读本节了。

实现步骤

step1 分析数据，获得过滤条件

通过分析herolist的数据，我们得出herotype的对应表

const heroType = [
  { key: 0, value: '全部' },
  { key: 1, value: '战士' },
  { key: 2, value: '法师' },
  { key: 3, value: '坦克' },
  { key: 4, value: '刺客' },
  { key: 5, value: '射手' },
  { key: 6, value: '辅助' },
];

step2 添加Card布局

- import { Row, Col } from 'antd';
+ import { Row, Col, Card } from 'antd';
...
<div className={styles.normal}>
+  <Card className={styles.radioPanel}>       
+  </Card>
...

step3 增加单选框分组

- import { Row, Col, Card } from 'antd';
+ import { Row, Col, Radio, Card } from 'antd';
+ const RadioGroup = Radio.Group;
+ const heroType = [
+  { key: 0, value: '全部' },
+  { key: 1, value: '战士' },
+  { key: 2, value: '法师' },
+  { key: 3, value: '坦克' },
+  { key: 4, value: '刺客' },
+  { key: 5, value: '射手' },
+  { key: 6, value: '辅助' },
+ ];
function Hero({ hero,dispatch }) {
...
<Card className={styles.radioPanel}>
+        <RadioGroup >
+          {heroType.map(data => (
+            <Radio value={data.key} key={`hero-rodio-${data.key}`}>
+              {data.value}
+            </Radio>
+          ))}
+        </RadioGroup>
</Card>

step4 为单选框分组增加事件和值

- const { heros = [] } = hero;
+ const { heros = [],filterKey=0 } = hero;
+ const onChange = e => {
+    console.log(e.target.value);
+ };
...
- <RadioGroup>
+ <RadioGroup onChange={onChange} value={filterKey}>

./src/pages/hero/models/hero.js model中要增加filterKey值

state: {
    heros: [],
+   filterKey:0
},

step5 将事件同步到model中

从属性中取得dispatch方法

- function Hero({ hero }) {
+ function Hero({ hero,dispatch }) {

使用dispatch，将数据更新到页面上。

const onChange = e => {
-    console.log(e.target.value);
+    dispatch({type:"hero/save",payload:{
+      filterKey:e.target.value
+    }})
};

dispatch可以把事件发布到reducers和effects，这里我们只需要更新filterKey就好，所以我们发起一个type为sava的事件，这是我们之前的代码了，可以再看一下，它只是把参数同步到state中

reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },

step6 使用filterKey过滤数组

<Row>
-{heros.reverse().map(item => (
+{heros.filter(item=>filterKey===0||item.hero_type === filterKey).reverse().map(item => (
...
</Row>

第一个条件filterKey===0是因为我们把全部的key设置为0 第二个条件判断hero_type,过滤数组。

step7 保存，运行程序

代码回顾：这节课的全部代码

作业

参考上述操作，为局内布局增加过滤条件。 提示

const itemType = [
  { key: 0, value: '全部' },
  { key: 1, value: '攻击' },
  { key: 2, value: '法术' },
  { key: 3, value: '防御' },
  { key: 4, value: '移动' },
  { key: 5, value: '打野' },
  { key: 7, value: '辅助' },
];

参考答案：代码