Блог

Так что у меня есть два занятия. Мой основной класс называется InputClear. Он предназначен для удержания подкомпонента и кнопки для очистки. Первый класс называется InputClear и выглядит так…

 const InputClear = () => {
    const[name2val, setName2] = useState("");
    const[min2, setMin] = useState("0...");
    const[maxval, setMax] = useState("...1000");

    const handleClick2 = () => { //This is to clear all fields of user input
        setMin("0...");
        setMax("...1000");
        console.log(min2);
    }

    return(
        <nav className={"inputclear-list"}>
            <h3 className={"inputclear-list-logo"} >
                <u>Perform Queries: </u>
            </h3>
            <UserInput name2={" Ranking "} min={min2} max={maxval}/>

            <br/>
            <button className={"button"} onClick={handleClick2}> Reset </button>
        </nav>
    );
};
 

Мой второй класс называется userInput. Он предназначен для получения пользовательского ввода и пока ничего с ним не делает.
Это выглядит так

 [Input Box] < Ranking < [Input Box]
 

Это то, что у меня есть до сих пор…

 const UserInput = (props) => {
    const update = (value) => {
        console.log(value.target.value);//Gets value put into text box
    }

    return(
        <div className='container'>
            <div className='col'>
                <input type='text' placeholder={props.min} onChange={update} />
            </div>
            <div className="col">amp;<{props.name2}amp;<</div>
            <div className="col">
                <input type='text' placeholder={props.max} onChange={update} />
            </div>
        </div>
    );
};
 

Где я натыкаюсь на стену, так это всякий раз, когда нажимается кнопка из InputClear, все значения, введенные в текстовые поля в userInput, очищаются.
По сути, я имею в виду, если это выглядит так

 [1000] < Ranking < [10000]
it then becomes
[    ] < Ranking < [     ] 
 

Вам необходимо предоставить setMin и setMax функции дочернему компоненту, чтобы установить тот state , который находится в вашем родительском компоненте.

 const InputClear = () => {
    const[name2val, setName2] = useState("");
    const[min2, setMin] = useState("0...");
    const[maxval, setMax] = useState("...1000");

    const handleClick2 = () => { //This is to clear all fields of user input
        setMin("0...");
        setMax("...1000");
        console.log(min2);
    }

    return(
        <nav className={"inputclear-list"}>
            <h3 className={"inputclear-list-logo"} >
                <u>Perform Queries: </u>
            </h3>
            <UserInput name2={" Ranking "} min={min2} max={maxval} setMin={setMin} setMax={setMax} />

            <br/>
            <button className={"button"} onClick={handleClick2}> Reset </button>
        </nav>
    );
};
 

Затем внутри change функции вам нужно обновить state ее следующим образом, когда onChange в input полях происходит событие. placeholder это просто временный держатель, куда вы можете поместить его как минимум и максимум (только строки), или вы также можете поместить свои начальные min и max значения.

 const UserInput = (props) => {
    const update = (event, setValue) => {
        console.log(event.target.value); //Gets value put into text box
        setValue(event.target.value);
    }

    return(
        <div className='container'>
            <div className='col'>
                <input type='text' value={props.min} onChange={(event) => update(event, props.setMin)} />
            </div>
            <div className="col">amp;<{props.name2}amp;<</div>
            <div className="col">
                <input type='text' value={props.max} onChange={(event) => update(event, props.setMax)} />
            </div>
        </div>
    );
};