react函数组件react-vant实现搜索关键字
时间: 2023-08-09 12:04:14 浏览: 52
首先,你需要在你的 React 项目中安装 `react-vant` 组件库:
```
npm install react-vant
```
然后,在你的函数组件中引入 `Search` 组件,并使用 `useState` 钩子来管理搜索关键字的状态:
```jsx
import React, { useState } from 'react';
import { Search } from 'react-vant';
function MyComponent() {
const [keyword, setKeyword] = useState('');
const handleSearch = (value) => {
setKeyword(value);
console.log(`搜索关键字:${value}`);
};
return (
<div>
<Search value={keyword} placeholder="请输入搜索关键字" onChange={handleSearch} />
<p>当前搜索关键字为:{keyword}</p>
</div>
);
}
export default MyComponent;
```
在上面的代码中,我们使用了 `Search` 组件,并将搜索关键字的状态存储在 `keyword` 变量中。当用户输入搜索关键字时,我们通过 `onChange` 回调函数更新 `keyword` 的值,并在控制台中打印当前搜索关键字。最后,我们将 `keyword` 的值渲染到页面上,让用户知道当前搜索的关键字是什么。