在按回车键后调用更改事件

javascript reactjs twitter-bootstrap

2022-08-29 23:53:11

我是Bootstrap的新手，并陷入了这个问题。我有一个输入字段，一旦我输入一个数字，就会调用函数 from，但我希望在输入整数时按'Enter'时调用它。验证函数也存在同样的问题 - 它调用得太快。onChange

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
});

答案 1

根据 React Doc，您可以收听键盘事件，例如或，而不是。onKeyPressonKeyUponChange

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} />
}

答案 2

您可以直接在输入字段上使用 onKeyPress。onChange 函数在每次输入字段更改时都会更改状态值，在按 Enter 键后，它将调用函数 search（）。

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>