在React js中，当按下Enter键时触发onblur事件的方法是什么？

Question

我有一个输入文本框。当用户输入任何文本并点击回车按钮时，我需要激活模糊事件以移除焦点并验证文本输入。

当用户在输入文本框中输入任何文本并按下回车键时，我需要触发模糊事件以取消焦点并验证输入的文本内容。

<input type="text" 
    style={{marginTop:'20%', marginLeft:'40%'}} 
    value={value} 
    onFocus={onFocus}
    onChange={e => setValue(e.target.value)}
    onKeyPress={handleKeyPress}
/>

- ReNinja

Answer 1

使用 onKeyDown 代替 onKeyPress，因为它可以检测到 keyCode 事件。

<input type="text"
    style={{marginTop:'20%', marginLeft:'40%'}} 
    value={value} 
    onFocus={onFocus} 
    onChange={e => setValue(e.target.value)}
    onKeyDown={(e) => this.handleKeyPress(event)}
/>

而函数将会像这样：

handleKeyPress(e){
   if(e.keyCode === 13){
     e.target.blur(); 
     //Write you validation logic here
   }
}

- ravibagul91

---

MDN文档指出KeyboardEvent.KeyCode已被弃用。"尽可能避免使用它，并更新现有代码；[...]请注意，此功能随时可能停止工作。"并且"如果可能的话，应该避免使用它；它已经被弃用了一段时间。相反，如果实现了，应该使用KeyboardEvent.code，[...]请注意确保您使用的是在所有目标浏览器上都受支持的代码。" - Patrick M

还有 KeyboardEvent.key ，这可能是仅检测用户按下 Enter 键的更好选择。 - Patrick M

请注意，这样做可以正确触发“blur”事件，但会移除输入框原本由“Enter”键触发的某些默认行为（比如提交表单、自动跳转到表单中的下一个字段等）。 - undefined

Answer 2

使用refs和this.inputRef.current.blur()。这是可行的解决方案。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      value: ""
    };
  }
  keypressHandler = event => {
    if (event.key === "Enter") {
      this.setState({ value: this.inputRef.current.value });
      this.inputRef.current.blur();
      this.inputRef.current.value = "";
    }
  };
  render() {
    return (
      <div>
      <label>Enter Text</label>
        <input
          type="text"
          ref={this.inputRef}
          onKeyPress={event => this.keypressHandler(event)}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

- Engineer

---

从文档中可以得知，避免使用 refs 来完成可以声明式完成的任务，并且不要过度使用 refs。具体内容请参考 React 官方文档中关于 Refs 和 DOM 的部分。 - ravibagul91

Answer 3

一句话就是：

<input
...
onKeyDown={(e) => e.key === "Escape" && e.target.blur()}    
/>

- milovac