小编Pol*_*jee的帖子

我的 gulpfile.js 如下所示，

var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');

gulp.task('connect', function () {
    connect.server({
        root: 'build',
        livereload: true,
        port: 3000
    });
});

gulp.task('html', function () {
    return gulp.src('client/html/**/*.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('build'))
        .pipe(connect.reload())
});

gulp.task('css', function () {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'client/scss/*.scss'])
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(gulp.dest('build/css'))
        .pipe(connect.reload())
});

gulp.task('images', function () {
    return gulp.src(['client/assets/**/*.*'])
        .pipe(gulp.dest('build/assets'))
        .pipe(connect.reload())
}); …

我正在为我的项目创建一个网格，我需要在其中实现列过滤。我已经完成了大部分工作，但面临一个问题，那就是每当我单击 ID 列的过滤器输入框时，该列就会被排序。我尝试过使用，e.stopPropagation()但这不起作用。

我的代码库的工作副本可以在https://4hz20.csb.app/找到，代码可以在https://codesandbox.io/s/data-table-forked-4hz20找到

ColumnFilter.js

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  width: 144px;
  margin: 8px 0;
  padding: 12px;
  border: solid 1px #c2c3c9;
  background-color: #ffffff;
`;

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <Input
      value={filterValue || ""}
      onChange={(e) => {
        e.stopPropagation();
        setFilter(e.target.value);
        return false;
      }}
      placeholder="Search"
    />
  );
};

另外我正在使用manualFilters: true,manualSortBy: true因为manualPagination: true我想在服务器端处理它们，但手动排序和手动过滤似乎不能一起工作，请参阅 …