React中如何处理输入框Enter键触发搜索按钮功能

嘿，我来帮你搞定这个问题！你遇到的核心问题有两个：一是要让Enter键触发搜索逻辑，二是要阻止默认的表单提交行为（这就是为什么按Enter会清空输入框的原因）。下面给你两种可行的解决方案，推荐第二种，更符合表单的语义化设计。

方案一：直接给输入框绑定键盘事件 #

把搜索逻辑封装成独立的handleSearch方法，然后给输入框添加onKeyDown事件，判断是否按下Enter键：

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {FormField, Form} from 'digitalexp-comm...';

class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: ''
    };
    this.handleSearch = this.handleSearch.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    this.setState({searchText: e.target.value});
  }

  handleSearch() {
    // 这里放你的搜索逻辑
    console.log('执行搜索:', this.state.searchText);
  }

  render() {
    return (
      <Form>
        <FormField
          type="text"
          value={this.state.searchText}
          onChange={this.handleInputChange}
          placeholder={<FormattedMessage id="search.placeholder" />}
          // 添加键盘事件处理
          onKeyDown={(e) => {
            // 判断是否按下Enter键
            if (e.key === 'Enter') {
              e.preventDefault(); // 阻止表单默认提交行为，避免输入框清空
              this.handleSearch();
            }
          }}
        />
        <button onClick={this.handleSearch}>
          <FormattedMessage id="search.button" />
        </button>
      </Form>
    );
  }
}

export default SearchForm;

方案二：利用表单的onSubmit事件（推荐） #

这种方法更符合HTML表单的原生行为，当用户在输入框按Enter或者点击提交按钮时，都会触发表单的onSubmit事件，只需要统一处理即可：

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {FormField, Form} from 'digitalexp-comm...';

class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: ''
    };
    this.handleSearch = this.handleSearch.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(e) {
    this.setState({searchText: e.target.value});
  }

  handleSearch() {
    // 这里放你的搜索逻辑
    console.log('执行搜索:', this.state.searchText);
  }

  handleSubmit(e) {
    e.preventDefault(); // 阻止默认提交行为，避免页面刷新/输入框清空
    this.handleSearch();
  }

  render() {
    return (
      // 给表单绑定onSubmit事件
      <Form onSubmit={this.handleSubmit}>
        <FormField
          type="text"
          value={this.state.searchText}
          onChange={this.handleInputChange}
          placeholder={<FormattedMessage id="search.placeholder" />}
        />
        {/* 把按钮类型设为submit，点击时会触发表单的onSubmit */}
        <button type="submit">
          <FormattedMessage id="search.button" />
        </button>
      </Form>
    );
  }
}

export default SearchForm;

为什么原来按Enter会清空输入框？ #

这是因为HTML表单的默认提交行为：当用户在输入框按下Enter时，表单会自动提交，如果没有指定action属性，浏览器会刷新页面，导致输入框的状态被重置。添加e.preventDefault()就能阻止这个默认行为，同时保留我们自定义的搜索逻辑。

内容的提问来源于stack exchange，提问作者Abhishek