Change of input value with state in React JS

Question

I am having 3 text boxes in which users enter values alongwith that I have 3 sliders for which the value is set based on calculation of percentage from the entered values. My problem is I also want to change the text box values based on calculation formulas. So the text box I want them to reflect values with calculation as the slider values change plus user can also type in values.For eg for first textbox I want to calculate value inside with (total-b-c). So with changes in slider values of percentages the values in textboxes should also change. I am unable to do that now-

Here is some supporting code for the same-

const [userValues, setUserValues] = useState({
    a: '0',
    b: '0',
    c: '0',
    
    
  });
const handleInputChange = (event) =>{
   setUserValues({ ...userValues, [event.target.name]: event.target.value });
    
}

Textboxes-

  <div className="container1">
      
        <div className="headingsleft">Enter number of <br></br> invoices</div>
        <div>
        <h4 style={{fontWeight:500, marginLeft:30,fontSize:19}}>a Invoices</h4>
        <br></br>
        <br></br>
       <TextField  label="p.a." type="number" name="a" size="small"  className={classes.root}  inputProps={{ min: "0" }}  variant="outlined"  value={userValues.nonedinumber}  onChange={handleInputChange} required error={userValues.a=== ""}   helperText={userValues.a=== "" ? 'Required' : ' '}  ></TextField> 
      
      
         </div>
          
        <div>
        <h4 className="headings">b Invoices</h4>
        <br></br>
        <br></br>
        <TextField label="p.a." type="number" name="b" size="small" className={classes.root}  inputProps={{ min: "0" }} variant="outlined" value={userValues.b} onChange={handleInputChange} required error={userValues.b=== ""}   helperText={userValues.b=== "" ? 'Required' : ' '}/> 
        </div>


        <div>
        <h4 style={{fontWeight:500, marginLeft:30,fontSize:19}}>cInvoices</h4>
        <br></br>
        <br></br>
        <TextField label="p.a." type="number" name="c" size="small" className={classes.root} inputProps={{ min: "0" }}  variant="outlined" value={userValues.c} onChange={handleInputChange} required error={userValues.c=== ""}   helperText={userValues.c=== "" ? 'Required' : ' '}/> 
        </div>


       
        <div>
        <h4 style={{fontWeight:500, marginLeft:30,fontSize:19}}>Total Invoices</h4>
        <br></br>
        <br></br>
        <TextField label="p.a." type="number" size="small" id="total" value={total} disabled variant="outlined"  /> 
        </div>
       
      
       
      </div>

code for the slider-

const Inputaftercalculate = (props) => {
    const classes = useStyles();
    
    return (
        <div>
              <div className="container2">

              <div className="headingsleft">Percentage Distribution 
           
</div>

            <div >
            <br></br>
            <br></br>
            <Typography   className={classes.slider}  id="discrete-slider-always" gutterBottom>

            </Typography>
            <Slider 
            defaultValue={20}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider-always"
            step={10}
            marks={marks}
            valueLabelDisplay="on"
            value={props.a}
            disabled
            />
            </div>

            <div>
            <br></br>
            <br></br>
            <Typography className={classes.slider}  id="discrete-slider-always" gutterBottom>

            </Typography>
            <Slider
            defaultValue={20}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider-always"
            step={10}
            marks={marks}
            valueLabelDisplay="auto"
            value={props.b}
            />
            </div>

            <div>
            <br></br>
            <br></br>
            <Typography className={classes.slider}  id="discrete-slider-always" gutterBottom>

            </Typography>
            <Slider
            defaultValue={1}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider-always"
            step={10}
            marks={marks}
            valueLabelDisplay="auto"
            value={props.c}
            />
            </div>


</div>
        </div>

How can I make the input textboxes adjust inside values based on changes in slider values and also let users input in the textbox whenever they need to change values?

Juan Pablo Méndez · Accepted Answer · 2021-06-07 04:11:19Z

1

First you got get the value and it respective key from the event, then expand it and finally assign the value to the respective key name as shown bellow.

const handleInputChange = e => { const {name, value} = e.target; handleInputChange({ ...userValues, [name]: value, }) }

answered Jun 7, 2021 at 4:11

Juan Pablo Méndez

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change of input value with state in React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related