当前位置: 首页 > 面试题库 >

在按Enter键后调用onChange事件

轩辕实
2023-03-14
问题内容

我是Bootstrap的新手,并且一直遇到这个问题。我有一个输入字段,只要输入一个数字,onChange就会调用from函数,但是我希望在输入完整个数字后按“
Enter”键才能调用它。验证功能存在相同的问题-调用时间过早。

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});

问题答案:

根据React Doc的说法,您可以听键盘事件,例如onKeyPressor onKeyUp,not onChange

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

更新:使用React.Component

这是使用React.Component的代码,它执行相同的操作

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

这是jsfiddle。

更新2:使用功能组件

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}


 类似资料:
  • 我有一个。其中有一个按钮()。我为它编写了单击按钮事件:

  • inputText字段的代码如下所示; 到目前为止,我已经试着对包含面板进行了定时的部分刷新,我已经将typeahead模式从无设置为满。没什么区别。 除了每10分钟刷新一次页面之外,还有什么是夫妇造成的问题。仅供参考的是,实际的typeahead是正确工作一致的,它只是onchange事件停止发射。

  • 问题内容: PrimeFaces在按Enter键时禁用提交。 我正在运行在WildFly 8.2 Final上运行的PrimeFaces 5.1。 我有对话框,有两个inputNumbers和两个按钮。并且第一个inputNumber对ajax模糊事件进行一些计算。按钮旁边是在bean中进行一些计算的按钮。问题是,当用户在焦点位于inputNumber时按Enter时,按钮的动作被触发,这确实很烦

  • 问题内容: 我正在使用Selenium Server(v2.21)和SeleniumJavaClient(v.2.21.0)来自动化Web表单,该表单需要在每次输入后都按下键,因为字段是根据输入的值公开的。因此,根据此处的解决方案,我一直在尝试不同的方法以在表单中输入字符串并按-这是我尝试过的方法: 它会 看起来 像这是最合理的解决方案(),但是编译器抛出,如果你不添加一个错误,因为期待一个字符串

  • 问题内容: 我有一个显示值的文本字段。我想要的是,当用户在该文本字段中输入新值并按Enter时,将触发ajax函数以执行分页操作。我有一个像这样的文本字段: 当用户编写任何新值并按Enter时,我希望触发以下ajax函数: 我尝试使用keypress事件进行检测,但这不能解决问题。谁能指导我? 问题答案: 在jsfiddle上。

  • 在这种特殊情况下,当我按Enter键时,我必须使用哪些选项使这些输入调用函数? Html: