Javascript 反应-搜索组件到筛选器数组

最近，我一直在搜索，以了解实时搜索输入背后的发展，内容是一个数组。在我的例子中，数组用于创建文件树所有代码都在这里：

经过一些调查和查看一些工作示例后，解决方案似乎很简单，但后来我明白，我仍然对它的创建感到困惑因此，我定义了初始状态，但我不知道接下来要做什么，将搜索与数组连接起来。

于是，我开始这样做：

export class SearchEngine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.inputChange = this.inputChange.bind(this);
  }

  inputChange(e) {
    const content = e.target.value;
    this.props.onChange();
  }

  static defaultProps = {
    onChange: (search) => {

    }
  }

  render() {
    return (
      <input placeholder="Search the tree..." onChange={this.inputChange}/>
    );
  }
}

export default SearchEngine;

导出类搜索引擎扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
this.inputChange=this.inputChange.bind（this）；
}
输入更改（e）{
常量内容=e.目标值；
this.props.onChange（）；
}
静态defaultProps={
onChange：（搜索）=>{
}
}
render（）{
返回(
);
}
}
导出默认搜索引擎；

这是数组和

：

let data = [
  {
    type: "directory",
    name: ".",
    contents: [
      {
        type: "directory",
        name: "./bin",
        contents: [{ type: "file", name: "./bin/greet" }]
      },
      {
        type: "directory",
        name: "./lib",
        contents: [{ type: "file", name: "./lib/greeting.rb" }]
      },
      {
        type: "directory",
        name: "./spec",
        contents: [
          { type: "file", name: "./spec/01_greeting_spec.rb" },
          { type: "file", name: "./spec/02_cli_spec.rb" },
          { type: "file", name: "./spec/spec_helper.rb" }
        ]
      },
      { type: "file", name: "./CONTRIBUTING.md" },
      { type: "file", name: "./Gemfile" },
      { type: "file", name: "./Gemfile.lock" },
      { type: "file", name: "./LICENSE.md" },
      { type: "file", name: "./README.md" }
    ]
  }
];

export class FileTree extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeNode: null
    };
    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({ activeNode: name });
    this.props.liftStateUp(name);
  }

  render() {
    return (
      <div className="padd_top">
        {renderTree(
          this.props.root || root,
          this.setActiveNode,
          this.state.activeNode
        )}
      </div>
    );
  }
}

export default FileTree;

let数据=[
{
键入：“目录”，
姓名：“.”，
内容：[
{
键入：“目录”，
名称：“./bin”，
内容：[{类型：“文件”，名称：“./bin/greet”}]
},
{
键入：“目录”，
名称：“./lib”，
内容：[{类型：“文件”，名称：“./lib/greeting.rb”}]
},
{
键入：“目录”，
名称：“/规格”，
内容：[
{键入：“文件”，名称：“./spec/01_@spec.rb”}，
{类型：“文件”，名称：“./spec/02_cli_spec.rb”}，
{类型：“文件”，名称：“./spec/spec\u helper.rb”}
]
},
{键入：“文件”，名称：“./contribution.md”}，
{类型：“文件”，名称：“./Gemfile”}，
{键入：“文件”，名称：“./Gemfile.lock”}，
{键入：“文件”，名称：“./LICENSE.md”}，
{键入：“文件”，名称：“./README.md”}
]
}
];
导出类FileTree扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeNode:null
};
this.setActiveNode=this.setActiveNode.bind（this）；
}
setActiveNode（名称）{
this.setState（{activeNode:name}）；
此.props.liftStateUp（名称）；
}
render（）{
返回(
{renderTree(
这个.props.root | | root，
这个.setActiveNode，
this.state.activeNode
)}
);
}
}
导出默认文件树；

我对此事的澄清表示感谢，并想提前感谢您提供的所有帮助。我是一个ReaTJS新手，在新理解的中间。

---

谢谢。

您的问题是您在

搜索引擎
类中没有定义的
道具。onChange
函数。如果您的组件依赖于
prop.onChange
作为一个函数，并且您直接调用它，那么您必须设置所需的prop.onChange

从“道具类型”导入道具类型
类SearchEngine扩展了React.Component{
静态类型={
onChange:PropTypes.func.isRequired
}
}

或者，您可以使用

类搜索引擎扩展了React.Component{
静态defaultProps={
onChange:（）=>{}
}
}

事实上，如果道具未通过，它将不会起任何作用，但它不会崩溃。从您的示例中，不清楚onChange应该做什么，但您并没有从呈现
搜索引擎的
index.js
传递它

编辑：working solution
@RCohen我添加了工作示例，我没有注意重构，只是提供了工作示例另一件事，我注意到当您从数组中搜索文件时，如
greeting.rb
，此内容将消失。那里少了什么@Milos Mosovsky我认为这是因为它还需要匹配dir name，尝试搜索
spec
或
贡献
我没有为您做繁重的工作，也没有优化代码以适应所有可能的选项，但只是向您展示了下一步。我认为，通过这个示例，如果所有组件中都有
searchTerm
，则可以轻松调整过滤机制。您只能执行
file
search或
dir
search或两者兼而有之。让我们看看为什么
static defaultProps={onChange:（）=>{}空@米洛斯莫索夫斯基