Change input.value from onchange function (Reactjs)-CodePudding

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

I just dont 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 });
    }
  };

CodePudding user response：

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

CodePudding user response：

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