辅捡滚动条bug修改2332

src/components/AddAssistCheck/Textarea/index.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import style from "./index.less";
 import config from '@config/index';
-import ScrollArea from 'react-scrollbar';
 import $ from 'jquery';
 
 class Textarea extends Component {
@@ -20,7 +19,8 @@ class Textarea extends Component {
   handleInput(e){
     const {handleChangeAssistValue,idx,handlePush} = this.props;
     const text = (e.target.innerHTML || e.target.innerText);
-    $(e.target).find('img').remove()
+    $(e.target).find('img').remove();
+    this.context.scrollArea.scrollBottom();       //避免滚动条上移不见
     // e.target.innerHTML = e.target.textContent
     const stimer = this.state.timer;
     handleChangeAssistValue&&handleChangeAssistValue(text,idx);
@@ -70,24 +70,7 @@ class Textarea extends Component {
   }
   render() {
     const {idx,disabled} = this.props;
-    //出现滚动条时阻止滚动冒泡，未出现时不阻止，否则外部滚动条滚不动
-    const showedBar = $("#datePick .scrollbar-container").length===1;
-    const contStyle={
-      opacity:'0.4',
-      right:'0',
-      top:'1px',
-      zIndex:'15',
-      width:'8px',
-      background:'#f1f1f1'};
-    const barStyle={background:'#777',width:'100%'};
-    return (<ScrollArea speed={0.8}
-                        horizontal={false}
-                        stopScrollPropagation={showedBar?true:false}
-                        style={{maxHeight:'100px'}}
-                        className={style["area"]}
-                        verticalContainerStyle={contStyle}
-                        verticalScrollbarStyle={barStyle}
-                        contentClassName="content">
+    return (
       <div className={style.textWap}>
         <div className={style.divTextarea}
             contenteditable={disabled?false:true}
@@ -96,8 +79,11 @@ class Textarea extends Component {
             onKeyUp={this.handleInput}
         ></div>
         <p ref={this.textInput} onClick={this.handleFocus} className={style.textareaWarring}></p>
-      </div></ScrollArea>
+      </div>
     );
   }
 }
+Textarea.contextTypes = {
+  scrollArea: React.PropTypes.object
+};
 export default Textarea;

src/components/AddAssistCheck/index.jsx

@@ -180,6 +180,16 @@ class AddAssistCheck extends React.Component {
   getAssistLabel() {
     const { assistLabel,checkedListImport, handleChangeAssistValue, handleChangeDate, isRead, handlePush, winWidth,getInfomation,assistList } = this.props;
     const { visible,activeName,id,date } = this.state;
+    //出现滚动条时阻止滚动冒泡，未出现时不阻止，否则外部滚动条滚不动
+    const showedBar = $("#datePick .scrollbar-container").length===1;
+    const contStyle={
+      opacity:'0.4',
+      right:'0',
+      top:'1px',
+      zIndex:'15',
+      width:'8px',
+      background:'#f1f1f1'};
+    const barStyle={background:'#777',width:'100%'};
     return <React.Fragment>
       {
         checkedListImport.map((part,index)=>{
@@ -194,7 +204,16 @@ class AddAssistCheck extends React.Component {
                     </span>
                   </span>
                   <div className={styles.textareaWrap}>
-                    <Textarea value={item.value} disabled={item.disabled} handlePush={handlePush} isRead={isRead} handleChangeAssistValue={handleChangeAssistValue} idx={idx}></Textarea>
+                    <ScrollArea speed={0.8}
+                                horizontal={false}
+                                stopScrollPropagation={showedBar?true:false}
+                                style={{maxHeight:'100px'}}
+                                className={styles["area"]}
+                                verticalContainerStyle={contStyle}
+                                verticalScrollbarStyle={barStyle}
+                                contentClassName="content">
+                      <Textarea value={item.value} disabled={item.disabled} handlePush={handlePush} isRead={isRead} handleChangeAssistValue={handleChangeAssistValue} idx={idx}></Textarea>
+                    </ScrollArea>
                   </div>
                   <div className={styles.pointerFinger}>
                     <p>报告日期：<span>{item.time || this.state.dateTime}</span></p>
@@ -237,7 +256,16 @@ class AddAssistCheck extends React.Component {
                 </span>
               </span>
               <div className={styles.textareaWrap}>
+                <ScrollArea speed={0.8}
+                            horizontal={false}
+                            stopScrollPropagation={showedBar?true:false}
+                            style={{maxHeight:'100px'}}
+                            className={styles["area"]}
+                            verticalContainerStyle={contStyle}
+                            verticalScrollbarStyle={barStyle}
+                            contentClassName="content">
                 <Textarea value={item.value} disabled={item.disabled} handlePush={handlePush} isRead={isRead} handleChangeAssistValue={handleChangeAssistValue} idx={idx}></Textarea>
+                </ScrollArea>
               </div>
               <div className={styles.pointerFinger}>
                 <p onClick={() => this.handleShowDate(idx)}>报告日期：<span>{item.time || this.state.dateTime}</span></p>