ReactJs材料UI中的搜索栏

在ReactJs中，搜索栏非常常见，可以使用材料UI库中的搜索栏组件，以便快速构建高质量的搜索栏。

使用步骤

安装材料UI库

npm install @material-ui/core

导入搜索栏组件

import { TextField } from '@material-ui/core';

构建搜索栏

<TextField
  id="search-box"
  label="搜索"
  type="search"
  variant="outlined"
  size="small"
  onChange={(event) => setSearch(event.target.value)}
/>

属性解释

• id: 搜索栏ID
• label: 搜索栏标题
• type: 搜索栏类型
• variant: 搜索栏变种类型
• size: 搜索栏尺寸
• onChange: 搜索栏变化事件

实现搜索功能

可以将搜索栏的变化事件与其他代码配合以实现搜索功能。例如，可以在React Hooks中使用useState来存储搜索关键字并执行搜索。

import { useState } from 'react';

function SearchBar() {
  const [search, setSearch] = useState('');

  function handleSearch() {
    // 执行搜索逻辑
  }

  return (
    <TextField
      id="search-box"
      label="搜索"
      type="search"
      variant="outlined"
      size="small"
      fullWidth
      onChange={(event) => setSearch(event.target.value)}
      onBlur={handleSearch}
    />
  );
}

上面的代码中，我们使用useState来存储搜索关键字，然后在搜索栏失去焦点时执行搜索逻辑。搜索结果根据具体情况呈现。