更新终极版道具/状态下的div的onclick

我有一个表 - 我们称之为表1.表1中的一排点击正在显示另一个表，我们称之为一个表2.相关的表2显示数据在表1中点击行有时垂直滚动需要显示在表2中，有时不是行数-depends。 需要解决：有边界的不必要的转变不被显示在滚动时：更新终极版道具/状态下的div的onclick

。 该解决方案的想法：“更改保证金的权利”根据条件显示是否滚动退出或不存在。将此条件的结果保存到Redux支持： element.scrollHeight> element.clientHeight || element.scrollWidth>
element.clientWidth

问题：试图从不同的事件作出反应，例如componentDidMount，componentWillReceiveProps更新滚动的显示/非显示到终极版支柱，CopmponentDidUpdate（设置状态导致infinte环这里）以及点击事件。在将道具设置为Redux之后，尝试使用forceUpdate（）。

当CONSOLE.LOG成铬（F12），其被正确地关联于显示的唯一结果控制台/滚动条的非显示从componentDidUpdate内的，它不会在了Redux丙反映（ isoverflown函数返回true，终极版this.props.scrollStatus和this.state.scrollStatus都是假的）。也不喜欢的document.getElementById对其中包含的行div中使用，因为它打破了DOM的操纵从道具和状态中，但没有找到不同的解决方案现在。

当显示滚动条的F12控制台：不显示滚动条时

的F12控制台：。

的代码的其余部分：

1）作用：

 export function setScrollStatus(scrollStatus) { 
 
     return { 
 
       type: 'SET_SCROLL_STATUS', 
 
       scrollStatus: scrollStatus 
 
     }; 
 
     }

2）减速机：

 export function scrollStatus(state = [], action) { 
 
      switch (action.type) { 
 
       case 'SET_SCROLL_STATUS': 
 
        return action.scrollStatus; 
 
       default: 
 
        return state; 
 
     } 
 
    }

3）Page.js（请点击图片查看代码）

import {setScrollStatus} from '../actions/relevantfilename'; 

function isOverflown(element) { 
    return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth; 
} 

class SportPage extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = initialState(props); 
     this.state = { 
      scrolled:false, 
      scrollStatus:false}; 

     componentDidUpdate() { 
      console.log("1 isoverflown bfr redux-this.props.setScrollStatus inside componentDidUpdate",isOverflown(document.getElementById('content'))); 
      //redux props 
      this.props.setScrollStatus(isOverflown(document.getElementById('content'))); 
      console.log("2 isoverflown aftr redux-this.props.setScrollStatus inside componentDidUpdate",isOverflown(document.getElementById('content'))); 
      //redux props 
      this.props.scrollStatus ? console.log (" 3 this.props.scrollStatus true inside componentDidUpdate") : console.log("this.props.scrollStatus false inside componentDidUpdate"); 
      console.log ("4 state scrollstatus inside componentDidUpdate" , this.state.scrollStatus) 
     } 

     componentDidMount(){ 
      console.log("3 isoverflown bfr set",isOverflown(document.getElementById('content'))); 
      this.props.setScrollStatus("set inside didMount", isOverflown(document.getElementById('content'))); 
      console.log("4 isoverflown aftr set didMount",isOverflown(document.getElementById('content'))); 
      this.props.scrollStatus ? console.log ("scrollStatus true") : console.log("scrollStatus false"); 
      console.log ("state scrollstatus inside didMount" , this.state.scrollStatus) 
     } 

     render() { 
      <div style={{overflowY:'scroll',overflowX:'hidden',height:'50vh',border:'none'}}> 
      { 
      this.props.rowData.map((row,index)=> 
      <div style={{ display: 'flex',flexWrap: 'wrap', border:'1px solid black'}} 
      onClick={ e => { this.setState({ selected: index, detailsDivVisible: true,scrolled:isOverflown(document.getElementById('content')), 
      scrollStatus:isOverflown(document.getElementById('content')) }, 
      this.props.setScrollStatus(isOverflown(document.getElementById('content'))),this.forceUpdate(),console.log ("onclick this.state.scrollStatus", this.state.scrollStatus), 
      console.log ("onclick pure funtion", isOverflown(document.getElementById('content')))); 

      const mapDispatchToProps = (dispatch) => { 
       return { 
       setScrollStatus: function (scrollStaus) {dispatch (setScrollStatus(scrollStaus))}, 
      }; 
     }; 
     export default connect(mapStateToProps, mapDispatchToProps)(Page);

来源

2017-08-16 Dani

你的代码somowhere像github上左右。将不得不运行该项目来查看问题。 –

很好，你可以解决它。 –

谢谢你的帮助。 – Dani

谢谢您的答复。然而，以不涉及生命周期/事件的不同方式解决它：

1）根据要显示的项目数计算滚动高度 - 单行高度的倍数。长，ARR来自JSON）

2）涡旋件的最大高度设定为设定的内容的最大高度一个所需值

3）是计算出的高度：

结果是一个滚动，显示所有的时间与正确的高度。这解决了缩进问题。

\t 
 
<div style={{overflowY:'auto', marginRight: '18px',zIndex:'1000',borderBottom:'1px solid black',borderRight:'1px solid black', height: this.props.rowData[this.state.selected].rowItemsList.length * singleRowHeight + 'px', maxHeight:'100px' }}> 
 

 
<div style={{ width:'inherit', maxHeight:this.props.this.props.rowData[this.state.selected]‌.rowItemsList.length * singleRowHeight + 'px' }}>

来源

2017-08-23 17:21:22 Dani

这个问题仍然出现在搜索中没有答案。你能否看到你是否可以接受你自己的答案？ https://stackoverflow.com/help/self-answer – jonahe

仅供参考，您不应该使用样式对象内联，因为它会强制重新呈现您的子树，因为每次都创建对象的新实例。性能打击取决于你的树有多大。通常，最佳做法是将其分配给组件中的变量，并将其用于div元素中。 – tgallacher

允许简化此。所有你需要的是每次在div中点击一次就发送reducer。请找到有用的代码片段，然后通过评论。

//import store from "./store/directory" - update this to ur store 
 
let DOMObject = document.getElementById("id1"); //dom reference i did it based on ID its up to u to refer how u like it 
 
//call back happens each time onclick event is triggered 
 
DOMObject.onclick =()=> { 
 
/* store.dispatch(
 
{ 
 
type:"reducer to invoke", 
 
data:"the data to update on click" 
 
} 
 
); 
 
*/ 
 
//uncomment above and update to your requirement 
 
console.log("clicked - Please update the dispatch event to you requirement"); 
 

 
}

#id1 { 
 
padding :100px 150px 100px 80px; 
 
background-color: lightblue; 
 
}

<div id="id1"> 
 
DIV AREA - clcik 
 
</div>

来源

2017-09-18 12:24:21 karthik

更新终极版道具/状态下的div的onclick

回答

相关问题