如何在react-admin中重用过滤器输入

// FilterInput.js
import React from 'react';
import { Filter, TextInput, useInput, useTranslate, useFilterContext } from 'react-admin';

const FilterInput = () => {
  const translate = useTranslate();
  const { setFilter, displayedFilters } = useFilterContext();
  
  const { input: value, onChange } = useInput('');

  const handleChange = (event) => {
    onChange(event);
    setFilter({ field: 'input', value: event.target.value || undefined });
  };

  return (
    <Filter context="button">
      <TextInput
        source="input"
        value={value}
        onChange={handleChange}
        label={translate('resources.posts.fields.title')}
      />
    </Filter>
  );
};

export default FilterInput;

// 使用FilterInput组件的页面
import React from 'react';
import { List, Datagrid, TextField } from 'react-admin';
import FilterInput from './FilterInput';

const PostList = (props) => (
  <List {...props} filters={<FilterInput />} perPage={10}>
    <Datagrid>
      <TextField source="title" />
      {/* 其他字段 */}
    </Datagrid>
  </List>
);

export default PostList;