javascript - 如何使用 Vanilla JavaScript 或 JQuery 实现受控组件(在 ReactJS 中)

Question

如何使用 Vanilla JS 或 JQuery 在 ReactJS 中实现受控输入概念？

尝试使用oninput，但只有在文本框中的值发生更改后才会触发。

这是我的代码示例，它应该阻止用户输入大于 999 的值。如果用户输入 1000，它会更改为 999，但应保持在 100。

<input name="count" id="groupcount" oninput="changeQuantityInGrid(this.value)">
....
function changeQuantityInGrid(quantity) {
        var maximun_connection_count = 999;
        if (quantity > maximun_connection_count){
            $('#groupcount').val(maximun_connection_count);
        }
}

Answer 1

我想你想要这样的东西

只需使用 $("#groupcount").maxValue(999); 将其应用于任何输入

$.fn.maxValue = function(maximun_connection_count) {

  this.each(function() {
    var value;
    $(this).on('input', function(e) {
      var quantity = e.target.value;
      if (quantity > maximun_connection_count) {
        $(this).val(value);
      } else {
        value = e.target.value;
      }
    })
  })

}

$("#groupcount").maxValue(999);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="count" id="groupcount">