资讯下拉框

src/pages/news/NewTypeList.jsx

 import React from 'react';
-import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import styles from '../style/News.less';
+import styles from '../style/GoodsList.less';
+import router from 'umi/router';
 
-
-class StateDropdown extends React.Component {
-    state = {
-      goodState: '请选择',
-    }
-  
-    render() {
-  
-      const menu = (
-        <Menu onClick={this.handleMenuClick}>
-          <Menu.Item key="1">
-            上架
-          </Menu.Item>
-          <Menu.Item key="2">
-            下架
-          </Menu.Item>
-        </Menu>
-      );
-      return (
-        < Dropdown overlay={menu} className={styles.searchItem} >
-          <Button>
-            {this.state.goodState} <Icon type="down" />
-          </Button>
-        </Dropdown>
-      )
+const { Option } = Select;
+// 提交事件
+function handleSubmit(e, props) {
+  e.preventDefault();
+  props.form.validateFields((err, values) => {
+    if (!err) {
+      console.log('提交数据: ', values)
     }
-    handleMenuClick = e => {
-      this.setState({
-        goodState: e.item.props.children,
-      });
-  
-    }
-  };
+  });
+}
+// Change 事件
+function handleSelectChange(props) {
+  console.log(props)
+}
+
+// 分页
+function onChange(pageNumber) {
+  console.log('Page: ', pageNumber);
+}
+// 跳转到编辑商品
+function toEditGoods() {
+  router.push({
+    pathname: '/activity/editActivity',
+    query: {
+      a: 'b',
+    },
+  });
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
 
 const dataSource = [
   {
     key: '1',
-    img: 'https://www.baidu.com/link?url=ukdsmDsrQ_2MkqTJlvDqO_qKzNPrQr2cFPKHF4zGr6bUG4JX6xfVuBLqYzFD6Pl4EIx_-clALifzoU8M2vtGBrsZH5v6g839XSYRr51YxmQ6saKbL2IsuDGlR6AXj_wGlw2MdNSWQUEhWwExhfBADvE78S6xwXa7imN9Pxg9qIwTUIYjefqI8Ngh2t3-_5VQz3sdxUpsA_OvbjUeYBECMWLLSB33z2xqCV_hdD8or0Vnjp4MYV6_wDlbXXEw2fBRT6jMX2MU-JdgeyF6uZEHYhcggH95vgtDXdW1Wg3ymkiiCYrQ8XpntziG5ClIbMXofwSw5XtsCpQTqech0Bjdq4nJZUWE0jYOlBGV6ZyNAw5dPEswruke6Gu-qGDJNxsnvyj1xYMdGC5UM9iKPV8y20Brk7Y7z_eIHQwnOd4Hie0RqJfDxiuQvn8jQonm8qB1t8sJ7Wo9Fh5BPe56KYfwNDiVTPjm7iXLdUtnjJA8UXWtStFfTfw3yRQnQnEbBUHWtaJBcLPdgbxveUHUU4aum_&wd=&eqid=ddc9f9630001ed6a000000045d8047a3',
+    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
     name: '华为P30 Pro',
   },
   {
     align: 'center',
 
   },
+
   {
     title: '操作',
     dataIndex: 'handle',
     key: 'handle',
     align: 'center',
-    render: () => <><span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>下架<Icon type="shopping-cart" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
+    render: () => <>
+    <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>删除<Icon type="shopping-cart" className={styles.shoppingCart} /></span>
+    <span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
   },
 ];
-function confirm() {
+const confirm = () => {
   Modal.confirm({
     title: '确认删除该商品？',
     okText: '确认',
   });
 
 }
-export default () => (
-  <>
-    <div className={styles.searchBox}>
-        <StateDropdown />
-    </div>  
-    <Button type="primary" className={styles.addBtn}>新增</Button>
-    <Table dataSource={dataSource} columns={columns} />
 
-  </>
-);
+const header = (props) => {
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('goodState')(
+            <Select style={{ width: '180px' }} placeholder="请选择" onChange={handleSelectChange}>
+              <Option value="1">上架</Option>
+              <Option value="0">下架</Option>
+            </Select>,
+          )}
+        </Form.Item>
+      </Form>
+      <Button type="primary" className={styles.addBtn} onClick={toEditGoods}>新增</Button>
+      <Table dataSource={dataSource} columns={columns} />
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader