0

ColumnFilter.js

该组件负责渲染过滤器组件。我刚刚发布了渲染FlterWrapper组件的部分（相关）。它包含一个传递给孩子的状态，每当孩子的输入发生变化时，这个组件中的状态就会更新。

<FilterWrapper
  inputKey={inputKey}
  filter={filter}
  updateFilterOnChange={updateFilterOnChange}
  filterData={filterData}
/>

FilterWrapper.js

该组件负责根据提供的类型选择要渲染的组件。@loadable/componentpackage 用于代码拆分，这实际上是导致此问题的原因。如果我删除可加载导入并直接导入过滤器组件，它的工作重点是文本字段保持不变，但是使用可加载包，它会导致重新渲染FilterWrapper，因此重新渲染也会出现在TextFilter组件中，这会导致将损失集中在文本字段上。

function FilterWrapper({ filter, updateFilterOnChange, filterData }) {
  const TextFilter = loadable(() => import('./TextFilter'));
  const DateRangeFilter = loadable(() => import('./DateRangeFilter'));
  const RadioFilter = loadable(() => import('./RadioFilter'));
  const CheckboxFilter = loadable(() => import('./CheckboxFilter'));

  switch (filter.type) {
    case 'text-search':
      return (
        <TextFilter
          filter={filter}
          updateFilterOnChange={updateFilterOnChange}
          filterData={filterData}
        />
      );
    case 'date-range-selection':
      return (
        <DateRangeFilter
          filter={filter}
          updateFilterOnChange={updateFilterOnChange}
          filterData={filterData}
        />
      );
    case 'radio-selection':
      return (
        <RadioFilter
          filter={filter}
          updateFilterOnChange={updateFilterOnChange}
          filterData={filterData}
        />
      );
    case 'checkbox-selection':
      return (
        <CheckboxFilter
          filter={filter}
          updateFilterOnChange={updateFilterOnChange}
          filterData={filterData}
        />
      );
    default:
      return null;
  }
}

TextFilter.js

TextField这是呈现MUI 的地方。

function TextFilter({ inputKey, filter, updateFilterOnChange, filterData }) {
  const key = 'searchText';
  const onChange = event => {
    const searchValue = event.currentTarget.value;
    updateFilterOnChange([
      {
        key,
        value: searchValue,
      },
    ]);
  };

  const useStyles = makeStyles(() => ({
    textField: {
      width: '25ch',
    },
  }));
  const classes = useStyles();

  return (
    <Box padding="0 16px">
      <TextField
        key={inputKey}
        placeholder="Enter keyword or id"
        onChange={onChange}
        value={filterData[key]}
        label="Contains"
        className={classes.textField}
        name={filter.name}
      />
    </Box>
  );
}
4

0 回答 0