如何在按下 Enter 后清除输入区域

在许多应用程序中，有时候我们需要将输入区域重置为空。比如一个输入框用户输入完后，按下 Enter，就需要将其内容清空以等待下一次输入。

那么，该怎么实现这个功能呢？以下是一些常见的实现代码：

HTML 代码

<input type="text" id="myInput" onkeydown="if(event.keyCode == 13) { clearInput() }">

<script>
function clearInput() {
  document.getElementById('myInput').value = "";
}
</script>

Vue 代码

<template>
  <div>
    <input type="text" v-model="inputText" @keydown.enter="clearInput">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    clearInput() {
      this.inputText = ''
    }
  }
}
</script>

React 代码

import React, { useState } from 'react';

function Input() {
  const [inputText, setInputText] = useState('');

  const handleKeyDown = (event) => {
    if (event.keyCode === 13) {
      clearInput();
    }
  };

  const clearInput = () => {
    setInputText('');
  };

  return (
    <div>
      <input type="text" value={inputText} onKeyDown={handleKeyDown} />
    </div>
  );
}

export default Input;

以上代码片段分别展示了 HTML、Vue 和 React 中如何实现在按下 Enter 后清空输入框的内容。其中，Vue 和 React 中借助了框架的双向数据绑定或状态管理，更方便地清空了输入框的内容。