清除输入( react)后无法重置筛选器

import React, { useState } from 'react';

function MyComponent() {
  const [filter, setFilter] = useState('');

  // 其他组件代码...

  return (
    // JSX代码...
  );
}

export default MyComponent;

function MyComponent() {
  const [filter, setFilter] = useState('');

  const handleFilterChange = (event) => {
    setFilter(event.target.value);
  };

  // 其他组件代码...

  return (
    <input type="text" value={filter} onChange={handleFilterChange} />
    // 其他JSX代码...
  );
}

function MyComponent() {
  const [filter, setFilter] = useState('');

  const handleFilterChange = (event) => {
    setFilter(event.target.value);
  };

  const handleResetFilter = () => {
    setFilter(''); // 将筛选器状态重置为空字符串
  };

  // 其他组件代码...

  return (
    <div>
      <input type="text" value={filter} onChange={handleFilterChange} />
      <button onClick={handleResetFilter}>重置筛选器</button>
      {/* 其他JSX代码... */}
    </div>
  );
}