Дан следующий код на React.
export default class CallPage extends Component {
state = {
isVisible: false,
prevBarId: "toolbar-hide",
prevBoxId: "toolbox-hide",
newBarId: "toolbar",
newBoxId: "toolbox",
};
static defaultProps = {
onMouseMove: () => {},
};
showToolElement = () => {
this.setState(
({ isVisible }) => ({
isVisible: !isVisible,
}),
() => {
this.props.onMouseMove(this.state.isVisible);
},
console.log("it works"),
);
};
render() {
const isVisibleBar = this.state.isVisible
? this.state.newBarId
: this.state.prevBarId;
const isVisibleBox = this.state.isVisible
? this.state.newBoxId
: this.state.prevBoxId;
return (
<div id="logged">
<div id="session" onMouseMove={this.showToolElement}>
<ToolBar visible={isVisibleBar} />
<VideoHolder />
<ToolBox visible={isVisibleBox} />
</div>
</div>
);
}
Суть в том, что при движении мыши он должен показывать невидимые блоки, а потом через заданное количество времени скрывать их снова. На данном этапе блоки появляются и исчезают на каждой новой координате мыши. Подскажите, как правильно прописать функцию showToolElement и setState, чтобы все работало как надо. Желательно, используя throttling.