Javascript 搜索缩小的结果

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

搜索

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>
    );
  }
}

import React，{Component}来自“React”；
从“/Table”导入表；
从“axios”导入axios；
导出默认类主扩展组件{
状态={
数据：空
};
onChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
axios
.get（“https://jsonplaceholder.typicode.com/comments")
。然后（res=>
这是我的国家({
数据：res.data
})
)
.catch（err=>console.log（err））；
};
render（）{
让结果；
if（this.state.data！==null）{
结果=this.state.data.filter（state=>{
const regex=new RegExp(
`^${this.state.name | | this.state.email | | | this.state.body}`，
“gi”
);
返回(
state.name.match（正则表达式）||
state.email.match（regex）||
state.body.match（正则表达式）
);
});
}
console.log（this.state.name）；
console.log（this.state.email）；
console.log（this.state.body）；
控制台日志（结果）；
console.log（this.state.data）；
返回(
{result！==未定义？：正在加载
}
);
}
}

Table.js

从“React”导入React，{Component}

导出默认类表扩展组件{
render（）{
const{data}=this.props；
控制台日志（数据）；
返回(
{data.map（el=>(
{el.name}
{el.email}
{el.body}
))}
);
}
}

我认为如果您可以使用

.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（）

是，但您可以按如下所述进行填充：

---

这仍然可以避免使用正则表达式，因为这里实际上不需要它。

我认为如果您可以使用

.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（）

是，但您可以按如下所述进行填充：

---

这仍然可以避免使用正则表达式，因为这里实际上不需要它。

是否确实要在至少一个输入的“过滤器”匹配的情况下获得所有结果？因此，如果记录名称道具与

^el.*

匹配，但电子邮件道具与

^foo.*

或其他内容不匹配，您仍然希望它出现在结果中？我想要的是：我在电子邮件筛选器中键入例如“Maria”，以便获得与电子邮件客户端中的Maria匹配的结果，并且在tahr之后，我希望缩小所有“Maria”的范围对于专栏主体，让我们说“某物”。所以我想过滤已经过滤过的值在屏幕截图上我想缩小过滤结果的范围首先是电子邮件。com你真的想得到至少一个输入的“过滤器”匹配的所有结果吗？因此，如果记录名称道具与

^el.*

匹配，但电子邮件道具与

^foo.*

或其他内容不匹配，您仍然希望它出现在结果中？我想要的是：我在电子邮件筛选器中键入例如“Maria”，以便获得与电子邮件客户端中的Maria匹配的结果，并且在tahr之后，我希望缩小所有“Maria”的范围对于专栏主体，让我们说“某物”。所以我想过滤已经过滤过的值在屏幕截图上我想缩小过滤结果的范围首先是电子邮件。谢谢taht，但它与我的代码一样，所以搜索所有名称，电子邮件，match的正文我想过滤一列，然后根据第二列和第三列进行过滤，缩小范围collumn@Damian我添加了另一个解决方案来满足您的需求（我以前不太了解），嘿，谢谢，我想这不是我需要的。我将试着描述一下。所以，当我和maria一起筛选专栏并得到4个结果时，我想通过筛选/搜索专栏名称来搜索/缩小电子邮件中的这4个结果，比如说，使用“el”值，并通过第二个专栏缩小电子邮件中的这4个结果，但这正是发生的事情，不是吗？如果筛选两次，则在列标题中键入的所有子字符串必须与显示的所有记录匹配。我准备了一个示例，您可以在代码中交换筛选字符串，并查看结果：感谢taht，但它与我的代码相同，因此在所有名称、电子邮件、，match的正文我想过滤一列，然后根据第二列和第三列进行过滤，缩小范围collumn@Damian我添加了另一个解决方案来满足您的需求（我以前不太了解），嘿，谢谢，我想这不是我需要的。我将试着描述一下。所以，当我和maria一起筛选专栏并得到4个结果时，我想通过筛选/搜索专栏名称来搜索/缩小电子邮件中的这4个结果，比如说，使用“el”值，并通过第二个专栏缩小电子邮件中的这4个结果，但这正是发生的事情，不是吗？如果筛选两次，则在列标题中键入的所有子字符串必须与显示的所有记录匹配。我准备了一个示例，您可以在代码中交换筛选字符串，并查看发生了什么：

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)
    );
});

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
    );
});