React 受限輸入字段（例如具有最小約束的數字）不允許您輕松輸入值

Question

考慮這個具有輸入字段的簡單反應組件，我想將其限制為最小值為 20：

class InputTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: 20,
    };
  }

  valChange = event => {
    let newVal = event.target.value;
    if (newVal >= 20) {
      this.setState({
        val: newVal,
      });
    }
  };

  render() {
    return (
      <div>
        <input
          type={'number'}
          value={this.state.val}
          onChange={this.valChange}
        />
      </div>
    );
  }
}

現在一切或多或少都可以正常工作，除非我嘗試在該字段中輸入一個全新的數字。

例如，如果我想選擇當前字段中的數字並用 243 覆蓋它。

當我突出顯示數字並按下“2”鍵時，反應組件拒絕數字 2，因為它小於 20，我無法輕松輸入數字。

我想知道是否已經存在某種解決方案。

如果不是，我可能可以通過某種延遲約束檢查來構建一些東西。

編輯：我應該提到這一點，但我只是決定添加最簡單的例子來使事情更清楚。 在我的情況下，我還有一個滑塊綁定到輸入字段，所以我想隨着輸入中的值的變化而改變滑塊的位置，反之亦然。 所以簡單地通知用戶是行不通的，因為滑塊的最小值和最大值限制了輸入。

我最終使用了去抖動功能來延遲滑塊位置的變化。

Answer 1

將您的input包裹在一個form並添加min和（如果需要，則為max ）屬性。 按Enter或Submit以查看通知（如果您不想要該按鈕，可以刪除該按鈕）

 <form> <input type = "number" min = 20 /> <input type = "submit" value = "submit" /> </form>

並刪除您不再需要的valChange函數中的條件。