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

约翰逊切里安

如何使用 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);
        }
}
施瑞达尔·夏尔马

我想你想要这样的东西

只需用于$("#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">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Vanilla JavaScript中执行$('。div a')?

来自分类Dev

如何从 vanilla javascript 中的输入获取对象

来自分类Dev

如何使用 vanilla JavaScript 刷新 JSON 请求中的表格行

来自分类Dev

如何在 vanilla javascript 中实现承诺以等待转换完成?

来自分类Dev

Svelte中的Vanilla JavaScript

来自分类Dev

如何清除ReactJS中的受控输入?

来自分类Dev

我可以怎样混合使用jQuery和Vanilla JavaScript

来自分类Dev

我可以怎样混合使用jQuery和Vanilla JavaScript

来自分类Dev

是“.after()”jQuery 还是我可以在 vanilla javascript 中使用它

来自分类Dev

使用“ for .. of”循环从Vanilla JavaScript中的Select标签中删除选项

来自分类Dev

如何在 AngularJS 中使用 jQuery SlideUp 方法的 vanilla JavaScript 要点

来自分类Dev

如何在 vanilla javascript 中通过 DOM 创建多个元素?

来自分类Dev

如何在vanilla JavaScript中将数字与数组中的数字匹配?

来自分类Dev

如何使用 moment 或 vanilla JavaScript 在 JavaScript 中获取日期字符串格式?

来自分类Dev

在 Reactjs 中实现 jquery UI Datepicker

来自分类Dev

如何使用Vanilla JavaScript从Angular 11 Form中的选定单选按钮获取价值

来自分类Dev

如何使用Vanilla JavaScript搜索和替换HTML文件中的所有标签?

来自分类Dev

如何使用Jquery根据reactjs中的日期更新dom?

来自分类Dev

ReactJS-如何使用JavaScript访问组件的displayName?

来自分类Dev

如何在 ReactJs 组件中使用外部 JavaScript 函数?

来自分类Dev

相当于jQuery not()的Vanilla Javascript

来自分类Dev

Jquery 和 Vanilla javascript 返回不同的元素

来自分类Dev

React 中的受控组件与非受控组件

来自分类Dev

如何使用javascript / jquery实现此动画?

来自分类Dev

如何在jquery回调函数中访问reactjs组件状态

来自分类Dev

如何在Cirq / Tensorflow Quantum中实现受控Rx?

来自分类Dev

与Vanilla JS中的jQuery`index()`等效

来自分类Dev

ReactJS-如何正确使用重用组件中的键

来自分类Dev

使用jquery或vanilla javascript将此函数的范围更改为调用方

Related 相关文章

  1. 1

    如何在Vanilla JavaScript中执行$('。div a')?

  2. 2

    如何从 vanilla javascript 中的输入获取对象

  3. 3

    如何使用 vanilla JavaScript 刷新 JSON 请求中的表格行

  4. 4

    如何在 vanilla javascript 中实现承诺以等待转换完成?

  5. 5

    Svelte中的Vanilla JavaScript

  6. 6

    如何清除ReactJS中的受控输入?

  7. 7

    我可以怎样混合使用jQuery和Vanilla JavaScript

  8. 8

    我可以怎样混合使用jQuery和Vanilla JavaScript

  9. 9

    是“.after()”jQuery 还是我可以在 vanilla javascript 中使用它

  10. 10

    使用“ for .. of”循环从Vanilla JavaScript中的Select标签中删除选项

  11. 11

    如何在 AngularJS 中使用 jQuery SlideUp 方法的 vanilla JavaScript 要点

  12. 12

    如何在 vanilla javascript 中通过 DOM 创建多个元素?

  13. 13

    如何在vanilla JavaScript中将数字与数组中的数字匹配?

  14. 14

    如何使用 moment 或 vanilla JavaScript 在 JavaScript 中获取日期字符串格式?

  15. 15

    在 Reactjs 中实现 jquery UI Datepicker

  16. 16

    如何使用Vanilla JavaScript从Angular 11 Form中的选定单选按钮获取价值

  17. 17

    如何使用Vanilla JavaScript搜索和替换HTML文件中的所有标签?

  18. 18

    如何使用Jquery根据reactjs中的日期更新dom?

  19. 19

    ReactJS-如何使用JavaScript访问组件的displayName?

  20. 20

    如何在 ReactJs 组件中使用外部 JavaScript 函数?

  21. 21

    相当于jQuery not()的Vanilla Javascript

  22. 22

    Jquery 和 Vanilla javascript 返回不同的元素

  23. 23

    React 中的受控组件与非受控组件

  24. 24

    如何使用javascript / jquery实现此动画?

  25. 25

    如何在jquery回调函数中访问reactjs组件状态

  26. 26

    如何在Cirq / Tensorflow Quantum中实现受控Rx?

  27. 27

    与Vanilla JS中的jQuery`index()`等效

  28. 28

    ReactJS-如何正确使用重用组件中的键

  29. 29

    使用jquery或vanilla javascript将此函数的范围更改为调用方

热门标签

归档