Question

我正在尝试探索搜索并缩小到某些结果。问题是，基于来自一个域的输出的搜索工作正常，但是当我想使用第二个或第三个域缩小搜索范围时，它不起作用。我认为问题出在这里，我不知道如何修改它以得到如此狭窄的结果。

if (this.state.data !== null) {

  result = this.state.data.filter(state => {
    const regex = new RegExp(
      `^${this.state.name || this.state.email || this.state.body}`,
      "gi"
    );

    return (
      state.name.match(regex) ||
      state.email.match(regex) ||
      state.body.match(regex)
    );
  });
}

搜索

import React, { Component } from "react";
import Table from "./Table";
import axios from "axios";
export default class Main extends Component {
  state = {
    data: null
  };
  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
    axios
      .get("https://jsonplaceholder.typicode.com/comments")
      .then(res =>
        this.setState({
          data: res.data
        })
      )
      .catch(err => console.log(err));
  };
  render() {
    let result;

    if (this.state.data !== null) {

      result = this.state.data.filter(state => {
        const regex = new RegExp(
          `^${this.state.name || this.state.email || this.state.body}`,
          "gi"
        );

        return (
          state.name.match(regex) ||
          state.email.match(regex) ||
          state.body.match(regex)
        );
      });
    }
    console.log(this.state.name);
    console.log(this.state.email);
    console.log(this.state.body);
    console.log(result);
    console.log(this.state.data);
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>
                <input
                  label="Name"
                  name="name"
                  placeholder="Name "
                  onChange={this.onChange}
                />
              </th>
              <th>
                <input
                  label="Name"
                  name="email"
                  placeholder="Email "
                  onChange={this.onChange}
                />
              </th>
              <th>
                <input
                  label="Name"
                  name="body"
                  placeholder="Body "
                  onChange={this.onChange}
                />
              </th>
            </tr>
          </thead>
          {result !== undefined ? <Table data={result} /> : <p>Loading</p>}
        </table>
      </div>
    );
  }
}

Table.js

从“反应”中导入React，{组件}；

export default class Table extends Component {
  render() {
    const { data } = this.props;
    console.log(data);
    return (
      <tbody>
        {data.map(el => (
          <tr key={el.id}>
            <td>{el.name}</td>
            <td>{el.email}</td>
            <td>{el.body}</td>
          </tr>
        ))}
      </tbody>
    );
  }
}

Answer 1

我认为，如果您可以使用.startsWith()，那么这是一种非常干净且可读的解决方案，无需使用正则表达式。在这里可能不需要它们：

result = this.state.data.filter(record => {
    return (
        record.name.starsWith(this.state.name) ||
        record.email.starsWith(this.state.email) ||
        record.body.starsWith(this.state.body)
    );
});

.startsWith()是not supported by IE，但是您可以按照here的说明进行填充：

if (!String.prototype.startsWith) {
    Object.defineProperty(String.prototype, 'startsWith', {
        value: function(search, pos) {
            pos = !pos || pos < 0 ? 0 : +pos;
            return this.substring(pos, pos + search.length) === search;
        }
    });
}

编辑：
如果要使所有过滤器都匹配，只需使用&&而不是||。另外，如果您想在数据中的任意位置（而不只是在开头）找到字符串，则代码可能如下所示：

result = this.state.data.filter(record => {
    return (
        record.name.indexOf(this.state.name) !== -1 &&
        record.email.indexOf(this.state.email) !== -1 &&
        record.body.indexOf(this.state.body) !== -1
    );
});

这仍然避免使用RegEx，因为在这里并没有必要。

搜索缩小的结果React

1 个答案: