Merge pull request #790 from wugaoliang1116/hotfix/cascader#value

Hotfix/cascader#value

components/cascader/Cascader.js

@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import debounce from 'lodash/debounce'
+import Popper from '../popper'
 import isEqual from 'lodash/isEqual'
 import shallowequal from 'shallowequal'
-import Popper from '../popper'
 import Menu from './Menu'
 import Provider from '../context'
 
@@ -65,7 +65,6 @@ class Cascader extends Component {
       component: this
     }
   }
-
   componentWillReceiveProps (nextProps) {
     if (!shallowequal(nextProps.value, this.props.value) || !isEqual(nextProps.data, this.props.data)) {
       const cascaderLabel = this.getCascaderLabel(nextProps.value, nextProps.data)
@@ -75,7 +74,6 @@ class Cascader extends Component {
       })
     }
   }
-
   componentDidMount () {
     window.addEventListener('click', this.clickOutsideHandel)
   }
@@ -104,7 +102,8 @@ class Cascader extends Component {
     this.setState({
       keyword: '',
       filterOptions: false,
-      cascaderValue: this.state.cacheValue,
+      cascaderValue: this.props.value.length ? this.props.value : this.state.cacheValue,
+      cascaderLabel: this.getCascaderLabel(this.props.value.length ? this.props.value : this.state.cacheValue),
       popperShow: true
     })
     this.inputRef.focus()
@@ -153,7 +152,6 @@ class Cascader extends Component {
       onActiveItemChange,
       changeOnSelect
     } = this.props
-
     this.setState({
       filterOptions: false,
       keyword: '',
@@ -236,6 +234,7 @@ class Cascader extends Component {
     const {
       localeDatas
     } = this.props
+
     if (this.props[key]) {
       return this.props[key]
     } else {
@@ -337,22 +336,25 @@ class Cascader extends Component {
       disabled,
       searchable,
       clearable,
+      value,
       style
     } = this.props
     const {
       cascaderValue,
-      cascaderLabel,
       keyword,
       popperShow,
-      filterOptions
+      filterOptions,
+      cascaderLabel
     } = this.state
+    const _cascaderValue = (value.length && !popperShow) ? value : cascaderValue
+    const _cascaderLabel = (value.length && !popperShow) ? this.getCascaderLabel(_cascaderValue) : cascaderLabel
     const extraClass = {
       'hi-cascader--disabled': disabled,
       'hi-cascader--focused': popperShow,
       'hi-cascader--clearable': clearable
     }
     const expandIcon = popperShow ? 'icon-up' : 'icon-down'
-    const placeholder = cascaderLabel || this.localeDatasProps('placeholder')
+    const placeholder = _cascaderLabel || this.localeDatasProps('placeholder')
     return (
       <div className={classNames('hi-cascader', className, extraClass)} style={style} ref={this.hiCascader}>
         <div className='hi-cascader__input-container' ref={node => { this.inputContainer = node }} onClick={this.handleClick.bind(this)}>
@@ -361,7 +363,7 @@ class Cascader extends Component {
               this.inputRef = node
             }}
             className='hi-cascader__input-keyword'
-            value={(popperShow && keyword) || (!popperShow && cascaderLabel) || ''}
+            value={(popperShow && keyword) || (!popperShow && _cascaderLabel) || ''}
             readOnly={!searchable}
             disabled={disabled}
             placeholder={placeholder}
@@ -387,7 +389,7 @@ class Cascader extends Component {
         >
           <Menu
             ref={node => { this.menuNode = node }}
-            value={cascaderValue}
+            value={_cascaderValue}
             options={filterOptions || data}
             root={() => this}
             isFiltered={filterOptions}

docs/demo/cascader/section-change.jsx

@@ -84,6 +84,7 @@ class Demo extends React.Component {
   constructor () {
     super()
     this.state = {
+      value:['手机'],
       options: [
         {
           id: '手机',
@@ -137,11 +138,16 @@ class Demo extends React.Component {
     }
   }
   render(){
+    const {value} = this.state
     return(
       <Cascader
         onChange={(id) => {
           console.log('on change', id)
+          this.setState({
+            value:id
+          })
         }}
+        value = {value}
         data={this.state.options}
         style={{ width: 240 }}
       />