react.js не работает рекурсивка

[riaron86]

выводит пустой экран

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;

[ksa]

не работает рекурсивка

Где тут рекурсия?

lastActive.addEventListener('change',checkError( pstartValue, ppendValue,lastActive));

Функция checkError выполнится, вернет

undefined

и именно это запишется в обработчик.

выводит пустой экран

Смотри какие ошибки, предупреждения пишет сервер и клиент...
Может до элемента Polzunok даже дело не доходит.

P.S.
И это не Node.JS...

[riaron86]

админ подскажи где по реакту писать?

[riaron86]

и еще здесь

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;
}

[Nexus]

riaron86, в 14й строке точно onCange, а не onChange?

[riaron86]

нашел пример на 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;

[Nexus]

riaron86, у вас на каждый рендер компонента будут навешиваться новые слушатели на каждый из инпутов.
Зачем вам ref'ы, если у input'ов есть onChange prop?

Хотите контролируемые input'ы - https://react.dev/reference/react-do...state-variable

[riaron86]

спасибо заработало

[riaron86]

есть еще вопрос насчет 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;

[ksa]

prop.checkboxi.map(/* ... */)

Например так...

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))