Javascript ReactJS与ReactRedux：实现搜索以查询项目列表

设置一些上下文：我有一个API，它返回一个键/值对数组。我想添加一个功能，在加载（完成）时显示网页上的每个键/值，并使用文本框对此列表进行“搜索”，当用户键入时，列表将缩小为仅匹配键

相关代码如下所示：

var PropEntry = function PropEntry(p) {    
    var displayValue = React.createElement(
        "span",
        null,
        p.value
    );
    var valueMarkup = React.createElement(
        "div",
        null,
        React.createElement(
            "span",
            { className: "prop-value" },
            displayValue
        );
    return React.createElement(
        "div",
        { className: "prop-entry" },
        React.createElement(
            "label",
            null,
            p.name
        ),
        valueMarkup
    );
};

var ColsView = function ColsView(props) {
    var cols = props.streamCols;
    return React.createElement(
        "div",
        { className: "named-container" }, 
        React.createElement(
        "input",
        { type: "text", placeholder: "Search", onChange: <CallFunctionHere> }),
        React.createElement(
        "div",
        { className: "named-entries" },
        cols.map(function (col) {               
            return React.createElement(PropEntry, { name: col.Name, value: col.value });
        })
        )
    )
}

ColsView = ReactRedux.connect(function (state) {
    return { streamCols: state.streamCols };
})(ColsView);

var PropEntry=函数PropEntry（p）{
var displayValue=React.createElement(
“跨度”，
无效的
p、 价值观
);
var valueMarkup=React.createElement(
“div”，
无效的
React.createElement(
“跨度”，
{className:“prop value”}，
显示值
);
返回React.createElement(
“div”，
{className:“道具条目”}，
React.createElement(
“标签”，
无效的
p、 名字
),
价值标记
);
};
var ColsView=函数ColsView（props）{
var cols=props.streamCols；
返回React.createElement(
“div”，
{className:“命名容器”}，
React.createElement(
“输入”，
{键入：“文本”，占位符：“搜索”，onChange:}），
React.createElement(
“div”，
{className:“命名条目”}，
cols.map（函数（col）{
返回React.createElement（PropEntry，{name:col.name，value:col.value}）；
})
)
)
}
ColsView=ReactRedux.connect（函数（状态）{
返回{streamCols:state.streamCols}；
})（ColsView）；

我正在尝试在列表上方添加一个文本框，该文本框会根据用户键入的内容过滤此列表（onChange击键）。最好的方法是什么？我希望避免再次调用API，因为我已经拥有完整的项目列表

我还应该提到，我是React的初学者，我只是想在现有的.js文件中添加一些我不想完全重写的功能：）

你看起来非常接近

作为类的一部分，定义可用于处理单击的回调：

handleChange = (event) => {
  // Get the value from the event
  const searchValue = event.target.value;

  // Save it to state
  this.setState({ searchValue });
}

您应该更新搜索框的定义，以从状态中提取其值，以便在组件重新呈现时，React不会删除该值：

React.createElement(
  "input",
  {
    type: "text",
    value: this.state.searchValue;
    placeholder: "Search",
    // Note that we just pass the function here, we don't actually call it.
    // React will call it for us when an onchange event occurs for this element
    onChange: this.handleChange,
  }
);

现在，在渲染方法中，可以根据保存在状态中的值进行过滤：

const regex = new RegExp(this.state.searchValue);
const filteredCols = Object.keys(cols)
  .filter(key => key.match(regex))
  .reduce((filtered, key) => {
    filtered[key] = cols[key];
    return filtered;
  }, {});

filteredCols.map(function (col) {               
  return React.createElement(PropEntry, { name: col.Name, value: col.value });
});

---

正如我们都注意到的，正则表达式可能不会那么简单（现在是精确匹配），但如果需要，可以在另一个问题中解决。

不幸的是，您的问题非常开放/广泛。实现客户端搜索的方法有很多很多种。最基本的方法是使用正则表达式过滤这些值。类似于

values.filter（value=>value.match（//g））

的

some regex

可能是您试图筛选的值，但很容易很快就会变得更复杂。在更复杂的方面，你可以做一些事情，比如标记化和构建搜索树，所有这些都是他们自己的重大主题。嗨@MatthewHerbst，很抱歉给你带来了困惑，我的问题很基本-我基本上只是想弄清楚我可以在文本框上添加onChange函数的位置，以及如何获取已经是各种“div”的一部分的值，并隐藏其中一些（未通过筛选的）。使用正则表达式的实际“过滤”将在稍后进行。我不确定我是否遵循-我没有在您的代码中看到

文本框

，或者任何类型的

输入

。您好@MatthewHerbst，抱歉-我没有添加文本框输入部分，因为我不确定它最初是否放在正确的位置。我已经编辑了这个问题，包括文本框现在，真的很感谢任何想法！太好了，这很有道理！谢谢@MatthewHerbst:）PS-答案中有一个小错误（单击而不是更改），我想我会让你知道的谢谢你抓住了这个问题，修正了！