Я использую Context with React для даты в компоненте A, которую я могу console.log, когда нажимаю кнопку в компоненте B, но не могу console.log, если я использую ползунок на том же компоненте B .. Ползунок будет брать только React.UseState из контекста, как я могу заставить его обновлять дату?
Slider, функция кнопки, которая получает обновление контекста, и функция onUpdate, которая не получает обновление контекста:
import React, { useState, useEffect } from "react";
import Nouislider from "nouislider-react";
import {DataContext} from "../../DataContext"
import { Slider } from 'antd';
import { Button } from 'antd';
import slowIcon from "../../image/slow_icon.svg"
import fastIcon from "../../image/fast_icon.svg"
import "nouislider/distribute/nouislider.css";
import TimeIcon from "../../image/time-icon.svg"
// Variable declaration
var maxV = ""
var minV = ""
function ProgressBar() {
// Allows to show the speeds from 1 to 10
const marks = {
0: '1/1',
10: "10/1"
};
const { valueTimestamp, valueDate } = React.useContext(DataContext);
const [timestamp, setTimestamp] = valueTimestamp
const [date, setDate] = valueDate
// Hook for the toggle of the play pause button
const [toggle, setToggle] = useState("play");
// Hook for the speed
const [speed, setSpeed] = useState(0)
// Hook for the timer display
const [timeDisplay, setTimeDisplay] = useState("12:50:10.134.888.555")
// Hook for the maximum value of the time bar based on the zoom bar
const [minValue, setMinValue] = useState(1);
const [maxValue, setMaxValue] = useState(8);
// Initial position of the time bar ( WILL CHANGE )
const positionMin = minValue + ((maxValue - minValue)/4)
const positionSolo = minValue + ((maxValue - minValue)/2)
const positionMax = maxValue - ((maxValue - minValue)/4)
// Function to change the class of the button to make the icon change and that
// will store the status of the button in the local storage to be used
// on the entire domain
function handleClick(){
if(toggle==="play"){
setToggle("pause")
localStorage.setItem("play",true)
console.log(timestamp)
console.log(date)
}else{
setToggle("play")
localStorage.setItem("play",false)
console.log(timestamp)
}
}
// Function activated when Speed slider slide that will set the speed and save
// it in the local storage to be used on the entire domain
function onChangeSlideSpeed(value){
setSpeed(value)
localStorage.setItem("speed",value)
}
// Function activated when Zoom slider slide that will set the minimum and maximum
// value for the Time slider
function onChangeSlideZoom(value) {
minV = parseFloat(value[0])
maxV = parseFloat(value[1])
setMaxValue(maxV)
setMinValue(minV)
console.log(date)
}
// Function activated when Time slider slide that will set the timer with the
// middle handle, set the maximum, minimum and chosen value in the local
// storage to be used on the entire domain
function onChangeSlideTime(value2) {
setTimeDisplay(sec2time(value2[1]))
localStorage.setItem("max",value2[2])
localStorage.setItem("min",value2[0])
localStorage.setItem("value",value2[1])
console.log(date)
}
// Function to transform the time display from seconds to HH:MM:SS,mmm
function sec2time(timeInSeconds) {
var pad = function(num, size) { return ('000' + num).slice(size * -1); },
time = parseFloat(timeInSeconds).toFixed(3),
hours = Math.floor(time / 60 / 60),
minutes = Math.floor(time / 60) % 60,
seconds = Math.floor(time - minutes * 60),
milliseconds = time.slice(-3);
// if(typeof timeInSeconds === 'number' || typeof timeInSeconds === 'bigint' ){
console.log(date)
// }
return pad(hours, 2) + ':' + pad(minutes, 2) + ':' + pad(seconds, 2) + '.' + pad(milliseconds, 3) ;
}
return (
<div className ="progress-bar">
<div className="top-bar">
<div className="speed-bar">
<img className="speed-icon" src={slowIcon} alt="logo"/>
<Slider marks={marks} onChange={onChangeSlideSpeed} defaultValue={speed} included={false} max={10} />
<img className="speed-icon" src={fastIcon} alt="logo"/>
</div>
<div className="play-button">
<Button onClick={handleClick} className={toggle}></Button>
</div>
<div className="stop-button">
<button className="stop"></button>
</div>
<div style={{fontSize:"15px"}} className="timer-bar">
<img style={{height:"15px",marginTop:"14px"}} src={TimeIcon} alt="logo"/>
<p style={{marginTop:"10px", padding:"0 5px"}}>
<span style={{color:"#3A9BEA"}}>{timeDisplay.substr(0,9)}</span>
<span style={{color:"#343F56"}}>{timeDisplay.substr(9,4)}</span>
<span style={{color:"#6D84A6"}}>{timeDisplay.substr(13,4)}</span>
<span style={{color:"#3A9BEA"}}>{timeDisplay.substr(17,3)}</span>
</p>
</div>
</div>
<div className="middle-bar">
<div className="timer-bar">
<div style={{ width:"100%",height:"70%",marginBottom:"-6px"}}className="timer">
<Nouislider
style={{width:"95%", display:"inline-block"}}
pips={{
mode: "positions", values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],density: 1,stepped: true ,
format: {
from: Number,
to: function(value){
return sec2time(value)
},
}
}}
range={{ min: minValue, max: maxValue }}
start={[positionMin,positionSolo,positionMax]}
margin={0.001}
connect={true}
behaviour= {'drag'}
step={0.001}
onUpdate={onChangeSlideTime}
tooltips={[
{from:Number ,to: function(value){return sec2time(value)}},
{from:Number ,to: function(value){return sec2time(value)}},
{from:Number ,to: function(value){return sec2time(value)}}
]}
/>
</div>
<div style={{ width:"100%",height:"40%",borderTop:"1px solid #8AA1C1"}} className="zoom">
<Nouislider
style={{ width:"90%", display:"inline-block",textAlign:"right"}}
pips={{
mode: "steps",
filter :
function(value){
if((value % 3600)===0){
return 1
}else if((value % 1800)===0){
return 2
}else if(value===0){
return 1
}else{
return -1
}
},
density: 2,
stepped: true,
format: {
from: Number,
to: function(value){
return sec2time(value).slice(0,5)
},
}
}}
range={{ min: 0, max: 86400 }}
start={[1, 86400]}
margin={1}
connect={true}
behaviour= {'drag'}
step={1}
onUpdate={onChangeSlideZoom}
tooltips={false}
/>
</div>
</div>
</div>
</div>
);
}
export default ProgressBar;
Файл контекста
import React, { createContext } from "react";
export const DataContext = createContext();
export const DataProvider = (props) => {
const [date, setDate]= React.useState("2019-07-18")
const [systemSum, setSystemSum] = React.useState("")
const [stratContext, setStratContext] = React.useState("")
const [run, setRun] = React.useState(true)
const [events, setEvents] = React.useState("")
const [stratCurrentPnl, setStratCurrentPnl] = React.useState("")
const [journal, setJournal] = React.useState("")
const [timestamp, setTimestamp] = React.useState("")
return(
<DataContext.Provider value={{
valueDate :[date, setDate],
valueSystem:[systemSum, setSystemSum],
valueStratContext:[stratContext, setStratContext],
valueRun: [run, setRun],
valueEvents: [events, setEvents],
valueStratCurrentPnl: [stratCurrentPnl, setStratCurrentPnl],
valueJournal: [journal, setJournal],
valueTimestamp: [timestamp, setTimestamp]
}}>
{props.children}
</DataContext.Provider>
)
}