react-vant中search实现搜索关键字

在 `react-vant` 中，`Search` 组件提供了搜索功能。你可以通过以下步骤来实现搜索关键字：

1. 在你的组件中引入 `Search` 组件：

import { Search } from 'react-vant';

2. 在组件中定义一个 `state` 用于保存搜索关键字：

constructor(props) {
  super(props);
  this.state = {
    keyword: '',
  };
}

3. 在 `Search` 组件中添加 `value` 和 `onChange` 属性，将搜索框的值与 `state` 中的 `keyword` 绑定起来：

<Search value={this.state.keyword} onChange={(value) => this.setState({ keyword: value })} />

4. 在执行搜索操作时，通过 `this.state.keyword` 获取当前搜索框中的关键字，然后进行相应的操作即可。

完整示例代码如下：

import React, { Component } from 'react';
import { Search } from 'react-vant';

class SearchExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keyword: '',
    };
  }

  handleSearch() {
    const { keyword } = this.state;
    console.log(`search keyword: ${keyword}`);
    // 执行搜索操作
  }

  render() {
    return (
      <Search
        value={this.state.keyword}
        onChange={(value) => this.setState({ keyword: value })}
        onSubmit={() => this.handleSearch()}
        placeholder="请输入搜索关键字"
      />
    );
  }
}

export default SearchExample;