react.js не работает рекурсивка
выводит пустой экран
import React,{useState,useRef,useEffect} from 'react';
function Polzunok() {
const pstart= useRef(1);
const ppend= useRef(15000);
const [pstartValue, setPstartValue] = useState(1);
const [ppendValue, setPpendValue] = useState(15000);
const [lastActive, setLastActive] = useState(0);
function checkError( a, b, c){
if(c==1){
if(a>b){
a=b-100;
}else if(a<b){
console.log("this a < b");
}
}else if(c==2){
if(a>b){
b=a+100;
}else if(a<b){
console.log("a < this b");
}
}else{
console.log("else");
}
}
useEffect(() => {
pstart.current.addEventListener('change', e => {
setLastActive(1);
setPstartValue(e.target.value);
})
ppend.current.addEventListener('change', e => {
setLastActive(2);
setPpendValue(e.target.value);
})
lastActive.addEventListener('change',checkError( pstartValue, ppendValue,lastActive));
}, []);
return (
<div className="container">
<h5 className="polzName">Название</h5><br/>
<div className="slider"></div>
<div>
<input type="range" ref={pstart} className="pp" min="0" max="16000"/>
<input type="range" ref={ppend} className="pp" min="0" max="16000"/>
</div>
<div><p>"start" {pstartValue} "end" {ppendValue}<br/>"lastActive":{lastActive}</p></div>
</div>
);
}
export default Polzunok;
|
Цитата:
Цитата:
undefinedи именно это запишется в обработчик. Цитата:
Может до элемента Polzunok даже дело не доходит. P.S. И это не Node.JS... |
админ подскажи где по реакту писать?
|
и еще здесь
import React, {useState} from 'react';
import Slider from 'react-slider';
function Polzunok() {
const MIN= 1200;
const MAX= 13000;
const [values, setValues] = useState([MIN,MAX]);
return (
<div className="container">
<h5 className="polzName">Название</h5><br/>
<div className="slider"></div>
<div>
<Slider className="slider" onCange={setValues} value={values} min={MIN} max={MAX}/>
</div>
</div>
);
}
export default Polzunok;
ползунки не двигаются вот css
/*polz*/
.slider {
position: relative;
width: 100%;
border-radius: 3px;
height: 2px;
background-color: darkgrey;
}
.slider .progress{
left:25%;
right:25%;
background-color: #61b9cf;
position: absolute;
}
div.track{
background-color: #61b9cf;
border: 1px solid #61b9cf;
padding:2px;
margin: 2px;
}
div.thumb{
background-color: white;
height: 10px;
width: 10px;
border:1px solid gold;
}
div.thumb:hover{
cursor: pointer;
}
div.thumb:active{
border:1px solid black;
cursor: pointer;
}
|
riaron86, в 14й строке точно onCange, а не onChange?
|
нашел пример на js обычном отсюда http://www.codingnepalweb.com/price-range-slider-html-css-javascript/[/url]
перевожу его на react если не сложно подскажите какие ошибки
import React,{useState,useRef} from 'react';
function Polzunok() {
const rangeMin=useRef();
const rangeMax=useRef();
const usualMin=useRef();
const usualMax=useRef();
const rangeq=useRef();
const priceGap = 1000;
const [minPriceI,setMinPriceI]=useState();
const [maxPriceI,setMaxPriceI]=useState();
const [minPriceR,setMinPriceR]=useState();
const [maxPriceR,setMaxPriceR]=useState();
usualMin.addEventListener("input", e =>{
setMinPriceI(parseInt(usualMin.current.value));
setMaxPriceI(parseInt(usualMax.current.value));
if(( maxPriceI- minPriceI >= priceGap) && usualMax.current.value<= rangeMax.max){
if(e.target.className === "input-min"){
rangeMin.value = minPriceI;
rangeq.style.left = ((minPriceI / rangeMin.max) * 100) + "%";
}
}
});
usualMax.addEventListener("input", e =>{
setMinPriceI(parseInt(usualMin.current.value));
setMaxPriceI(parseInt(usualMax.current.value));
if((maxPriceI - minPriceI >= priceGap) && maxPriceI <= rangeMax.max){
if(e.target.className === "input-max"){
rangeMax.value = maxPriceI ;
rangeq.style.right = 100 - (maxPriceI / rangeMax.max) * 100 + "%";
}
}
});
rangeMin.addEventListener("input", e =>{
setMinPriceR (parseInt(rangeMin.current.value));
setMinPriceR(parseInt(rangeMax.current.value));
if((maxPriceR - minPriceR) < priceGap){
if(e.target.className === "range-min"){
rangeMin.value = minPriceR - priceGap
}else{
rangeMax.value = minPriceR + priceGap;
}
}else{
usualMin.value = 2500;
usualMax.value = 7500;
rangeq.style.left = ((2500 / rangeMin.max) * 100) + "%";
rangeq.style.right = 100 - (rangeMax / rangeMax.max) * 100 + "%";
}
});
rangeMax.addEventListener("input", e =>{
setMinPriceR (parseInt(rangeMin.current.value));
setMinPriceR(parseInt(rangeMax.current.value));
if((maxPriceR - minPriceR) < priceGap){
if(e.target.className === "range-max"){
rangeMax.value = minPriceR + priceGap;
}
}else{
usualMin.value = 2500;
usualMax.value = 7500;
rangeq.style.left = ((2500 / rangeMin.max) * 100) + "%";
rangeq.style.right = 100 - (rangeMax / rangeMax.max) * 100 + "%";
}
});
return (
<div className="dbody">
<div className="wrapper">
<header>
<h2>Price Range</h2>
<p>Use slider or enter min and max price</p>
</header>
<div className="price-input">
<div className="field">
<span>Min</span>
<input type="number" ref={usualMin} className="input-min" value="2500"/>
</div>
<div className="separator">-</div>
<div className="field">
<span>Max</span>
<input type="number" ref={usualMax} className="input-max" value="7500"/>
</div>
</div>
<div className="slider">
<div className="progress" ref={rangeq}></div>
</div>
<div className="range-input">
<input type="range" className="range-min" ref={rangeMin}min="0" max="10000" value="2500" step="100"/>
<input type="range" className="range-max" ref={rangeMin} min="0" max="10000" value="7500" step="100"/>
</div>
</div>
</div>
);
}
export default Polzunok;
|
riaron86, у вас на каждый рендер компонента будут навешиваться новые слушатели на каждый из инпутов.
Зачем вам ref'ы, если у input'ов есть onChange prop? Хотите контролируемые input'ы - https://react.dev/reference/react-do...state-variable |
спасибо заработало
|
есть еще вопрос насчет useContext
есть объект как в дочернем элементе его перебрать, как в php foreach,
import React,{createContext} from 'react';
import Navbar from "./components/Navbar";
import LeftMenu from "./components/LeftMenu";
import {AuthContext} from './context';
function App() {
const prop= {
checkboxi:
{
named:'Android',
mname:'Android'
},
polzunok:
{
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}};
return (
<div className="App">
<AuthContext.Provider value={prop}>
<Navbar/>
<LeftMenu/>
</AuthContext.Provider>
</div>
);
}
export default App;
import React, {useContext} from 'react';
import {AuthContext} from "../../context/index.js";
function Checkbox() {
const prop=useContext(AuthContext);
return (
<div>
<ul>
{prop.checkboxi.map(prop.checkboxi.named => (
<li>{prop.checkboxi.named}
))}</li>
</ul>
</div>
);
}
export default Checkbox;
|
Цитата:
const prop= {
checkboxi: {
named:'Android',
mname:'Android'
},
polzunok: {
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}
};
Object.entries(prop.checkboxi).forEach(([k, v]) => console.log(k, v))
|
| Часовой пояс GMT +3, время: 20:43. |