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">

Answer 2

这是您在React中的操作方式。

import React, { Component } from 'react';

class App extends Component {
  state = {
    quantity: 0
  }
  changeQuantityInGrid = (e) => {
    const val = +(e.target.value) > 999 ? this.state.quantity : e.target.value
    this.setState({
      quantity: val
    })
  } 
  render() {
    return (
      <div className="App">
        <input name="count" value={this.state.quantity} id="groupcount" onChange={this.changeQuantityInGrid} />
      </div>
    );
  }
}

单击链接以运行演示 https://repl.it/repls/HardtofindTechnologicalCurrencies

谢谢：）

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

2 个答案: