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

Question

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

Answer 1

实例代码给你看看

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>