Question

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

相关的React代码如下：

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

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

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

Answer 1

您似乎很亲密！

在您的课程中，定义一个可用于处理点击的回调：

description

您应该更新搜索框的定义以将其值从状态中拉出，以便在组件重新渲染时React不会擦除该值：

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

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

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

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

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

具有ReactRedux的ReactJS：实现搜索以查询项目列表

1 个答案: