Change input.value from onchange function (Reactjs)

Question

I have an input tied to the state. HD variable. But I want to add validation so that if a negative number is entered, onblur the value of the input is set to the previous value of HD.

I just don't know how to call the input and make it change its value. I tried to ref it here for an uncontrolled attempt at changing it (https://www.pluralsight.com/guides/how-to-use-react-to-set-the-value-of-an-input)

Render

 <input
                      className="input"
                      name="HDin"
                      type="number"
                      defaultValue={this.state.HD}
                      onBlur={this.changeHD}
                      ref={this.HDref}
                    ></input>

changeHD = (e) => {
    let temp = this.state.HD;
    const amnt = e.target;
    let o = 0;
    o = parseInt(e.target.value);
    console.log(o);
    if (o < 0 || o === "" || o == NaN) {
      this.setState({ HD: temp });
      this.HDref.value = temp;
      this.setState({[e.target.value]: temp});
    } else {
      this.setState({ HD: o });
    }
  };

You can just change it’s value by assigning it to e.target.value — Terry
– Terry, Commented Feb 16, 2022 at 15:42

Parag Diwan · Accepted Answer · 2022-02-16 16:46:16Z

2

You can use setState and the prevState which is available.

class Counter extends React.Component {
  state = {
    counter: 0
  };
  onChangeHandler = (e) => {
    const currentValue = e.target.value;

    if (currentValue <= -1) {
      this.setState((prevState, props) => {
        return { counter: prevState.counter };
      });
    } else {
      this.setState({
        counter: currentValue
      });
    }
  };

  render() {
    return (
      <div>
        {this.state.counter}
        <input type="text" onBlur={this.onChangeHandler} />
      </div>
    );
  }
}

edited Feb 16, 2022 at 16:46

answered Feb 16, 2022 at 16:25

Parag Diwan

1577 bronze badges

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

1 Comment

Parag Diwan Over a year ago

You can only set the state if the number is positive.

Hen Moshe · Accepted Answer · 2022-02-16 16:18:16Z

1

input value={this.state} then you can change it using this.setstate

answered Feb 16, 2022 at 16:18

Hen Moshe

1246 bronze badges

Collectives™ on Stack Overflow

Change input.value from onchange function (Reactjs)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related