Clear Input from Textbox after Button clicked-CodePudding

So I have two classes. My main class is called InputClear. It's meant to hold the subcomponent and a button to clear. The first class is called InputClear and looks like this...

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

My second class is called UserInput. It is meant to get the user input and for now do nothing with it. This looks like this

[Input Box] < Ranking < [Input Box]

This is what I have so far...

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">&lt;{props.name2}&lt;</div>
            <div className="col">
                <input type='text' placeholder={props.max} onChange={update} />
            </div>
        </div>
    );
};

Where I'm hitting a wall is whenever the button from InputClear is clicked, all values entered into the text boxes in UserInput are cleared. Essentially what I mean is if it looks like this

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

CodePudding user response：

You need to provide setMin and setMax functions to child component to set the state that resides in your parent component.

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

Then inside change function you need to update the state as follows, when an onChange event occurs on input fields. placeholder is just a temporary holder where you can put it as minimum and maximum (just strings) or you can put your initial min and max values as well.

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">&lt;{props.name2}&lt;</div>
            <div className="col">
                <input type='text' value={props.max} onChange={(event) => update(event, props.setMax)} />
            </div>
        </div>
    );
};