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

在react-vant中，可以使用Search组件来实现搜索功能。具体实现步骤如下：

1. 首先，在组件中引入Search组件：

import { Search } from 'react-vant';

2. 在组件的state中定义一个searchValue的变量，用于存储搜索框中的关键字：

this.state = {
  searchValue: ''
}

3. 在render函数中，将Search组件放置在需要添加搜索功能的地方，并设置value和onChange属性，分别用于显示和更新搜索框中的值：

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

4. 在需要进行搜索的地方，使用filter方法进行筛选：

const filteredData = data.filter(item => item.name.includes(this.state.searchValue));

这里以筛选一个data数组中包含搜索关键字的项为例，可以根据实际需求进行修改。

完整代码示例：

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

const data = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'orange' },
  { id: 4, name: 'watermelon' },
];

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: ''
    }
  }

  render() {
    const filteredData = data.filter(item => item.name.includes(this.state.searchValue));

    return (
      <div>
        <Search
          value={this.state.searchValue}
          onChange={(value) => this.setState({ searchValue: value })}
        />
        <ul>
          {filteredData.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    )
  }
}

export default Example;