Question

最近，我一直在寻找了解实时搜索输入背后的发展，内容是一个数组。在我的例子中，该数组用于创建文件树。 所有代码都在这里： https://codesandbox.io/s/815p3k3vkj

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

所以，我开始做这样的事情：

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;

这是数组和<FileTree>：

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;

我很欣赏这个问题的所有清晰度，我想提前感谢你能提供的所有帮助。我是ReactJS的新手，正处于新的理解之中。

谢谢。

Answer 1

您的问题是props.onChange课程中没有定义的SearchEngine函数。如果您的组件依赖于prop.onChange是一个函数而您直接调用它，则必须设置所需的prop

import PropTypes from 'prop-types'


class SearchEngine extends React.Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired
  }
}

或者您可以使用

保护您的组件

class SearchEngine extends React.Component {
  static defaultProps = {
    onChange: () => {}
  }
}

实际上什么都不做，如果道具没有通过，但它不会崩溃。从您的示例中不清楚onChange应该做什么，但是您没有从index.js传递SearchEngine

编辑：工作解决方案https://y7p6zlmpyx.codesandbox.io/

React - 搜索组件以过滤数组

1 个答案: