fix(component): 修复 props 和 state 的 key 一致问题

jd-opensource · Aug 29, 2018 · ec822bc · ec822bc
1 parent d441b69
commit ec822bc
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 47 deletions.
diff --git a/src/components/action-sheet/index.js b/src/components/action-sheet/index.js
@@ -17,15 +17,15 @@ export default class AtActionSheet extends AtComponent {
     const { isOpened } = props
 
     this.state = {
-      isOpened
+      _isOpened: isOpened
     }
   }
 
   componentWillReceiveProps (nextProps) {
     const { isOpened } = nextProps
-    if (isOpened !== this.state.isOpened) {
+    if (isOpened !== this.state._isOpened) {
       this.setState({
-        isOpened
+        _isOpened: isOpened
       })
 
       !isOpened && this.handleClose()
@@ -48,7 +48,7 @@ export default class AtActionSheet extends AtComponent {
   close = () => {
     this.setState(
       {
-        isOpened: false
+        _isOpened: false
       },
       this.handleClose
     )
@@ -60,17 +60,20 @@ export default class AtActionSheet extends AtComponent {
 
   render () {
     const { title, cancleText } = this.props
-    const { isOpened } = this.state
+    const { _isOpened } = this.state
 
     const rootClassNames = ['at-action-sheet']
 
-    if (isOpened) {
+    if (_isOpened) {
       rootClassNames.push('at-action-sheet--active')
     }
 
     return (
       <View className={rootClassNames} onTouchMove={this.handleTouchMove}>
-        <View onClick={this.close} className='at-action-sheet__overlay my-class' />
+        <View
+          onClick={this.close}
+          className='at-action-sheet__overlay'
+        />
         <View className='at-action-sheet__container'>
           {title && <AtActionSheetHeader>{title}</AtActionSheetHeader>}
           <AtActionSheetBody>{this.props.children}</AtActionSheetBody>

diff --git a/src/components/float-layout/index.js b/src/components/float-layout/index.js
@@ -13,17 +13,18 @@ import './index.scss'
 export default class AtFloatLayout extends AtComponent {
   constructor (props) {
     super(...arguments)
+
     const { isOpened } = props
     this.state = {
-      isOpened
+      _isOpened: isOpened
     }
   }
 
   componentWillReceiveProps (nextProps) {
     const { isOpened } = nextProps
-    if (isOpened !== this.state.isOpened) {
+    if (isOpened !== this.state._isOpened) {
       this.setState({
-        isOpened
+        _isOpened: isOpened
       })
       !isOpened && this.handleClose()
     }
@@ -38,7 +39,7 @@ export default class AtFloatLayout extends AtComponent {
   close = () => {
     this.setState(
       {
-        isOpened: false
+        _isOpened: false
       },
       this.handleClose
     )
@@ -49,12 +50,12 @@ export default class AtFloatLayout extends AtComponent {
   }
 
   render () {
-    const { isOpened } = this.state
+    const { _isOpened } = this.state
     const { title } = this.props
 
     const rootClassNames = ['at-float-layout']
 
-    if (isOpened) {
+    if (_isOpened) {
       rootClassNames.push('at-float-layout--active')
     }
 

diff --git a/src/components/grid/__snapshots__/index.test.js.snap b/src/components/grid/__snapshots__/index.test.js.snap
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
@@ -11,13 +11,12 @@ import AtComponent from '../../common/component'
 import './index.scss'
 
 export default class AtGrid extends AtComponent {
-  handleClick = (e, ...arg) => {
+  handleClick = (item, index, row, ...arg) => {
     const { onClick, columnNum } = this.props
-    const { item, index, row } = e.currentTarget.dataset
     if (_isFunction(onClick)) {
       /* prettier-ignore */
       const clickIndex = (row * columnNum) + index
-      onClick(item, clickIndex, e, ...arg)
+      onClick(item, clickIndex, ...arg)
     }
   }
 
@@ -44,10 +43,7 @@ export default class AtGrid extends AtComponent {
               <View
                 key={index}
                 className={rootClass}
-                data-item={childItem}
-                data-index={index}
-                data-row={i}
-                onClick={this.handleClick}
+                onClick={this.handleClick.bind(this, index, i, childItem)}
               >
                 <View className='at-grid-item__content'>
                   <View className='at-grid-item__content-inner'>

diff --git a/src/components/modal/index.js b/src/components/modal/index.js
@@ -13,17 +13,18 @@ import './index.scss'
 export default class AtModal extends AtComponent {
   constructor (props) {
     super(...arguments)
+
     const { isOpened } = props
     this.state = {
-      isOpened
+      _isOpened: isOpened
     }
   }
 
   componentWillReceiveProps (nextProps) {
     const { isOpened } = nextProps
-    if (isOpened !== this.state.isOpened) {
+    if (isOpened !== this.state._isOpened) {
       this.setState({
-        isOpened
+        _isOpened: isOpened
       })
     }
   }
@@ -33,12 +34,12 @@ export default class AtModal extends AtComponent {
   }
 
   render () {
-    const { isOpened } = this.state
+    const { _isOpened } = this.state
     const { title, content, cancleText, confirmText } = this.props
 
     const rootClass = ['at-modal']
 
-    if (isOpened) {
+    if (_isOpened) {
       rootClass.push('at-modal--active')
     }
 

diff --git a/src/components/toast/index.js b/src/components/toast/index.js
@@ -23,7 +23,7 @@ export default class AtToast extends AtComponent {
 
     this._timer = null
     this.state = {
-      isOpened
+      _isOpened: isOpened
     }
   }
 
@@ -44,11 +44,11 @@ export default class AtToast extends AtComponent {
   }
 
   close () {
-    const { isOpened } = this.state
-    if (isOpened) {
+    const { _isOpened } = this.state
+    if (_isOpened) {
       this.setState(
         {
-          isOpened: false
+          _isOpened: false
         },
         this.handleClose
       )
@@ -66,9 +66,9 @@ export default class AtToast extends AtComponent {
     const { isOpened, duration } = nextProps
     if (!isOpened) return
 
-    if (!this.state.isOpened) {
+    if (!this.state._isOpened) {
       this.setState({
-        isOpened
+        _isOpened: isOpened
       })
     } else {
       this.clearTimmer()
@@ -88,7 +88,7 @@ export default class AtToast extends AtComponent {
   }
 
   render () {
-    const { isOpened } = this.state
+    const { _isOpened } = this.state
     const { text, icon, status, image, hasMask } = this.props
 
     const realImg = image || statusImg[status] || null
@@ -108,7 +108,7 @@ export default class AtToast extends AtComponent {
       rootClass.push('at-toast-body--custom-image')
     }
 
-    return isOpened ? (
+    return _isOpened ? (
       <View className='at-toast'>
         {hasMask && <View className='at-toast-overlay' />}
         <View className={rootClass} onClick={this.handleClick}>

diff --git a/src/components/toast/index.test.js b/src/components/toast/index.test.js
@@ -74,38 +74,38 @@ describe('Toast Behavior ', () => {
     const dom = findDOMNode(componet, 'at-toast')
     const bodyDom = dom.querySelector('.toast-body')
 
-    expect(componet.state.isOpened).toBeTruthy()
+    expect(componet.state._isOpened).toBeTruthy()
     Simulate.click(bodyDom)
 
     process.nextTick(() => {
       expect(onClose).toBeCalled()
-      expect(componet.state.isOpened).toBeFalsy()
+      expect(componet.state._isOpened).toBeFalsy()
     })
   })
 
   it('Toast will close when time over --- default', async () => {
     const componet = renderIntoDocument(<AtToast isOpened />)
 
-    expect(componet.state.isOpened).toBeTruthy()
+    expect(componet.state._isOpened).toBeTruthy()
     expect(componet.props.duration).toEqual(3000)
 
     await delay(3000)
 
     process.nextTick(() => {
-      expect(componet.state.isOpened).toBeFalsy()
+      expect(componet.state._isOpened).toBeFalsy()
     })
   })
 
   it('Toast will close when time over ', async () => {
     const componet = renderIntoDocument(<AtToast duration={1000} isOpened />)
 
-    expect(componet.state.isOpened).toBeTruthy()
+    expect(componet.state._isOpened).toBeTruthy()
     expect(componet.props.duration).toEqual(1000)
 
     await delay(1000)
 
     process.nextTick(() => {
-      expect(componet.state.isOpened).toBeFalsy()
+      expect(componet.state._isOpened).toBeFalsy()
     })
   })
 
@@ -115,13 +115,13 @@ describe('Toast Behavior ', () => {
     const dom = findDOMNode(componet, 'at-toast')
     const bodyDom = dom.querySelector('.toast-body')
 
-    expect(componet.state.isOpened).toBeTruthy()
+    expect(componet.state._isOpened).toBeTruthy()
 
     Simulate.click(bodyDom)
 
     expect(onClick).toBeCalled()
     process.nextTick(() => {
-      expect(componet.state.isOpened).toBeTruthy()
+      expect(componet.state._isOpened).toBeTruthy()
     })
   })
 })
diff --git a/src/pages/action/toast/index.js b/src/pages/action/toast/index.js
@@ -81,7 +81,7 @@ export default class ToastPage extends Component {
                   onClick={this.handleClick.bind(
                     this,
                     '文本内容',
-                    'loading',
+                    'analytics',
                     '',
                     false,
                     ''