|
@@ -0,0 +1,179 @@
|
|
|
+//import React from 'react';
|
|
|
+// import React, { Component } from 'react';
|
|
|
+import React, { PureComponent } from 'react';
|
|
|
+import { connect } from 'react-redux';
|
|
|
+import { BrowserRouter, Route,Link } from 'react-router-dom';
|
|
|
+// import { CSSTransition } from 'react-transition-group';
|
|
|
+import { actionCreators } from './store';
|
|
|
+
|
|
|
+// const Submenu = (props) => {
|
|
|
+// return (
|
|
|
+// <div>
|
|
|
+// <input onFocus={props.handleInputFocus} />
|
|
|
+// {props.menu}</div>
|
|
|
+// )
|
|
|
+
|
|
|
+// }
|
|
|
+
|
|
|
+/**
|
|
|
+ * 可替换成无状态组件
|
|
|
+ */
|
|
|
+
|
|
|
+
|
|
|
+class Submenu extends PureComponent {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ getListArea() {
|
|
|
+ const { list, menu } = this.props;
|
|
|
+ // const newList = list.toJS();
|
|
|
+ // const pageList = [];
|
|
|
+
|
|
|
+ // if (newList.length) {
|
|
|
+ // for (let i = (page - 1) * 10; i < page * 10; i++) {
|
|
|
+ // pageList.push(
|
|
|
+ // <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ //可以直接获得输入框里的内容
|
|
|
+ menu;
|
|
|
+ if (true) {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {
|
|
|
+ list.map((item) => {
|
|
|
+ return <div key={item}>{item}</div>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <BrowserRouter>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li><Link to='/'>首页</Link></li>
|
|
|
+ <li><Link to='/company'>关于</Link></li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ {/* <Route path='/' exact component={Home}></Route>
|
|
|
+ <Route path='/detail' exact component={Detail}></Route> */}
|
|
|
+ <Route path='/' exact render={()=><div>联系人</div>} ></Route>
|
|
|
+ <Route path='/company' exact render={()=><div>公司</div>} ></Route>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </BrowserRouter>
|
|
|
+ {/* innerRef */}
|
|
|
+ {inputValue}
|
|
|
+ <input onFocus={() => handleInputFocus(list)} ref={(input)=>{this.ivalue=input}} onChange={()=>handleInputChange(this.ivalue)} />
|
|
|
+ {menu}
|
|
|
+ <div>{this.getListArea()}</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ //组件即将要被挂在的时候执行的方法--
|
|
|
+ componentDidMount(){
|
|
|
+ //逻辑代码可以写在mapDispathToProps里 this.props.方法
|
|
|
+
|
|
|
+ // axios.get('/api/submenuList.json').then((res) => {
|
|
|
+ // const data = res.data;
|
|
|
+ // dispatch(changeList(data.data));
|
|
|
+ // }).catch(() => {
|
|
|
+ // console.log('error');
|
|
|
+ // })
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * store里的数据映射到这个组件里的state
|
|
|
+ * @param {*} state
|
|
|
+ */
|
|
|
+const mapStateToProps = (state) => {
|
|
|
+
|
|
|
+ return {
|
|
|
+ //menu: state.submenu.menu
|
|
|
+ menu: state.getIn(['submenu', 'menu']),
|
|
|
+ list: state.getIn(['submenu', 'list']),
|
|
|
+ inputValue: state.getIn(['submenu', 'inputValue']),
|
|
|
+ }
|
|
|
+ // return {
|
|
|
+ // focused: state.getIn(['header', 'focused']),
|
|
|
+ // list: state.getIn(['header', 'list']),
|
|
|
+ // page: state.getIn(['header', 'page']),
|
|
|
+ // totalPage: state.getIn(['header', 'totalPage']),
|
|
|
+ // mouseIn: state.getIn(['header', 'mouseIn'])
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 要改变store里的内容需要调用dispatch方法
|
|
|
+ * @param {*} dispatch
|
|
|
+ */
|
|
|
+const mapDispathToProps = (dispatch) => {
|
|
|
+ return {
|
|
|
+ handleInputFocus(list) {
|
|
|
+
|
|
|
+ // const action = {
|
|
|
+ // type: 'aearch_focus'
|
|
|
+ // };
|
|
|
+ //发送给store--提取出action--避免发送重复的ajax请求
|
|
|
+ (list.size === 0) && dispatch(actionCreators.getList());
|
|
|
+ // if(list.size>0){
|
|
|
+ // dispatch(actionCreators.getList());
|
|
|
+ // }
|
|
|
+ dispatch(actionCreators.searchFocus());
|
|
|
+ },
|
|
|
+ handleInputChange(ivalueElem){
|
|
|
+
|
|
|
+ dispatch(actionCreators.changeInputValue(ivalueElem.value));
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // return {
|
|
|
+ // handleInputFocus(list) {
|
|
|
+ // (list.size === 0) && dispatch(actionCreators.getList());
|
|
|
+ // dispatch(actionCreators.searchFocus());
|
|
|
+ // },
|
|
|
+ // handleInputBlur() {
|
|
|
+ // dispatch(actionCreators.searchBlur());
|
|
|
+ // },
|
|
|
+ // handleMouseEnter() {
|
|
|
+ // dispatch(actionCreators.mouseEnter());
|
|
|
+ // },
|
|
|
+ // handleMouseLeave() {
|
|
|
+ // dispatch(actionCreators.mouseLeave());
|
|
|
+ // },
|
|
|
+ // handleChangePage(page, totalPage, spin) {
|
|
|
+ // let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
|
|
|
+ // if (originAngle) {
|
|
|
+ // originAngle = parseInt(originAngle, 10);
|
|
|
+ // }else {
|
|
|
+ // originAngle = 0;
|
|
|
+ // }
|
|
|
+ // spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
|
|
|
+
|
|
|
+ // if (page < totalPage) {
|
|
|
+ // dispatch(actionCreators.changePage(page + 1));
|
|
|
+ // }else {
|
|
|
+ // dispatch(actionCreators.changePage(1));
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+export default connect(mapStateToProps, mapDispathToProps)(Submenu);
|