搜索input框功能，详细解答一下的

请问现在需要开发一个组件，就是常用的搜索组件，包括一个 input 框输入搜索内容的，两个button按钮，一个是搜索，一个是重置，如何封装这个组件？在其他组件中都可以调用，对外暴露哪几个属性？

实例代码给你看看


import React, { useState } from 'react';

const SearchComponent = ({ onSearch, onReset }) => {
  const [searchText, setSearchText] = useState('');

  const handleSearch = () => {
    onSearch(searchText);
  };

  const handleReset = () => {
    setSearchText('');
    onReset();
  };

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
      />
      <button onClick={handleSearch}>搜索</button>
      <button onClick={handleReset}>重置</button>
    </div>
  );
};

export default SearchComponent;

两个回调函数onSearch和onReset作为属性。onSearch用于处理搜索操作，onReset用于处理重置操作。
组件内部维护一个searchText状态，用于存储用户在输入框中输入的搜索内容。当用户输入时，onChange事件会更新searchText的值。
当点击“搜索”按钮时，会调用handleSearch函数，将当前输入的搜索内容传递给onSearch回调函数。当点击“重置”按钮时，会调用handleReset函数，将搜索内容清空并调用onReset回调函数。

如果你是vue也一样的


<template>
  <div>
    <input
      type="text"
      v-model="searchText"
      @input="handleInput"
    />
    <button @click="handleSearch">搜索</button>
    <button @click="handleReset">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    };
  },
  methods: {
    handleInput() {
      // 输入框输入内容时触发的事件
      // 可以在这里实现实时搜索功能（根据需求）
    },
    handleSearch() {
      // 点击搜索按钮时触发的事件
      this.$emit('search', this.searchText);
    },
    handleReset() {
      // 点击重置按钮时触发的事件
      this.searchText = '';
      this.$emit('reset');
    }
  }
};
</script>

参数：

defaultValue，初始值，如果存在有默认值的情况；
focus，是否自动聚焦；
3: placeholder，占位提示；
一些css属性，例如宽度、高度等。
事件：
input，输入时传值；
search，点击搜索/重置传值，也可以分两个事件；

常用的估计是这些，具体可以看自己业务需求变动。

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7530316
这篇博客也不错, 你可以看下苹果手机上input的button按钮颜色显示问题
除此之外, 这篇博客: button标签与input标签的区别中的 button标签 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
在 form标签中，也有3种type效果：
以下回答由chatgpt基于相关博客总结生成:
首先，我们可以使用Vue.js来封装这个可重复使用的搜索组件。具体步骤如下：
1. 创建一个名为SearchComponent的Vue组件。可以在一个单独的.vue文件中创建这个组件。
```
<template>
  <div>
    <input v-model="searchValue" type="text" placeholder="请输入搜索内容">
    <button @click="search">搜索</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: ''
    };
  },
  methods: {
    search() {
      // 执行搜索操作，可以在这里调用父组件传递的搜索方法
      this.$emit('search', this.searchValue);
    },
    reset() {
      // 执行重置操作
      this.searchValue = '';
    }
  }
};
</script>
```
1. 在其他组件中引入SearchComponent组件，并传入相应的属性和事件处理方法。
```
<template>
  <div>
    <search-component @search="handleSearch"></search-component>
  </div>
</template>

<script>
import SearchComponent from '@/components/SearchComponent.vue';

export default {
  components: {
    SearchComponent
  },
  methods: {
    handleSearch(searchValue) {
      // 处理搜索逻辑，可以在这里进行数据过滤或者发送网络请求等操作
      console.log("搜索内容：" + searchValue);
    }
  }
};
</script>
```
1. 在需要使用搜索组件的组件中引入SearchComponent，并在模板中使用。
2. 设置SearchComponent组件中的input框的v-model绑定的属性（这里是searchValue）来获取用户输入的搜索内容。
3. 在SearchComponent组件中，通过点击"搜索"按钮来执行搜索操作，可以在方法search()中调用父组件传递的搜索方法，并将搜索内容作为参数传递。
4. 在SearchComponent组件中，通过点击"重置"按钮来执行重置操作，可以将searchValue属性重置为空。
至此，我们已经封装好了一个可重复使用的搜索组件，并实现了相关的属性暴露。其中，对外暴露的属性是搜索按钮的点击事件search和搜索内容的绑定属性searchValue。
需要注意的是，以上代码是基于Vue.js框架来实现的，如果你没有使用Vue.js，可能需要根据你所使用的框架或库进行适当的调整。如果你没有使用任何框架，可以使用纯JavaScript来实现相似的功能。