如何配置mbrn/material-table按下回车后再请求远程搜索数据？

要实现全局搜索框输入后仅按回车才触发远程数据请求，核心思路是替换Material-Table默认的搜索组件，禁用其自动触发查询的行为，转而手动控制搜索请求的时机。以下是分步实现方案：

1. 添加本地搜索状态 #

首先在组件的state中新增一个字段，用于保存用户输入的搜索文本，避免直接修改Material-Table的query对象（默认query变化会自动触发请求）：

constructor(props) {
  super(props);
  this.state = {
    pageIndex: 0,
    pageSize: 10,
    query: {},
    oldQuery: {},
    searchText: '', // 存储搜索框输入内容
    // 保留你原有其他状态
  };
}

2. 自定义全局搜索组件 #

在Material-Table的components配置中替换默认的Search组件，用自定义输入框接管搜索逻辑：

<MaterialTable
  // 保留你原有其他属性（tableRef、title、data、isLoading等）
  components={{
    ...this.components, // 保留你原有自定义组件
    Search: props => (
      <div style={{ padding: '10px 16px' }}>
        <input
          type="text"
          placeholder={props.localization?.searchPlaceholder || '搜索...'}
          value={this.state.searchText}
          onChange={(e) => this.setState({ searchText: e.target.value })}
          onKeyPress={(e) => {
            // 仅在按下回车键时触发搜索
            if (e.key === 'Enter') {
              this.triggerSearch();
            }
          }}
          style={{
            padding: '8px 12px',
            width: '320px',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            fontSize: '14px',
          }}
        />
        {/* 可选：添加搜索按钮，方便用户点击触发 */}
        <button
          onClick={() => this.triggerSearch()}
          style={{
            marginLeft: '8px',
            padding: '8px 16px',
            backgroundColor: '#1976d2',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '14px',
          }}
        >
          搜索
        </button>
      </div>
    ),
  }}
  // 保留你原有其他配置（icons、detailPanel等）
/>

3. 实现手动触发搜索的方法 #

新增triggerSearch方法，在用户按下回车/点击搜索按钮时，将搜索文本合并到查询参数中，手动调用你的get方法发起请求：

triggerSearch = () => {
  const { searchText } = this.state;
  // 合并搜索关键词到当前查询参数，同时重置页码到第一页
  const updatedQuery = {
    ...this.state.query,
    search: searchText,
    page: 0,
  };

  // 更新state中的query，并发起请求
  this.setState({ query: updatedQuery }, () => {
    this.get(updatedQuery);
  });
}

4. 保留原有逻辑的兼容性 #

你的原有get方法、onEntityReceived方法以及data函数无需修改，因为：

• 分页、排序等操作仍会自动触发Material-Table的query变化，进而调用data函数和get方法，符合你的需求；
• 初始加载时，Material-Table会自动调用一次data函数，触发get方法获取初始数据；
• 搜索请求仅在用户手动触发（回车/点击按钮）时才会发起，完全符合你的要求。

注意事项 #

• 确保你使用的事件发射器（event对象）正常工作，因为原有代码依赖它来传递数据给Material-Table的Promise；
• 如果需要给搜索框添加样式，可以根据你的项目设计调整自定义输入框的CSS；
• 若要支持其他筛选条件的手动触发，可参考此逻辑替换对应的筛选组件。

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