從 onchange 函數更改 input.value (Reactjs)

Question

我有一個與狀態相關的輸入。 高清變量。 但我想添加驗證，以便如果輸入負數，onblur 將輸入的值設置為 HD 的先前值。

我只是不知道如何調用輸入並使其更改其值。 我試圖在這里引用它，以便不受控制地嘗試更改它（ https://www.pluralsight.com/guides/how-to-use-react-to-set-the-value-of-an-input ）

使成為

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

Answer 1

輸入 value={this.state} 然后您可以使用 this.setstate 更改它

Answer 2

您可以使用setState和可用的prevState 。

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