使用输入响应即时搜索

我正在做我的第一个反应项目。我是JS、HTML、CSS甚至Web应用程序编程的新手。

我想做的是一个搜索输入标签。现在看起来像这样:

如您所见,我有一些对象列表和文本输入。

我有两个部件,我的 ProjectList.js 具有 Search.js 组件…

class ProjectsList extends Component {
  render() {
    return (
      <div>
        <Search projects={this.props.projects} />
        <ListGroup>
          {this.props.projects.map(project => {
            return <Project project={project} key={project.id} />;
          })}
        </ListGroup>
      </div>
    );
  }
}

export default ProjectsList;

…和 项目列表 显示器 Project.js :

看起来怎么样 搜索引擎 (其未结束组件)

class Search extends Component {
  state = {
    query: ""
  };

  handleInputChange = () => {
    this.setState({
      query: this.search.value
    });
  };

  render() {
    return (
      <form>
        <input
          ref={input => (this.search = input)}
          onChange={this.handleInputChange}
        />
        <p />
       </form>
    );
  }
}

export default Search;

我的 project 有 name 财产。你能告诉我怎么编代码吗 搜索引擎 组件弹出,更改显示 projects 基于文本标签中的输入动态?例如, return Project 仅当输入的文本匹配时(我想在开始键入时动态搜索它 m …它显示开始于的所有项目 米 等)。

如何正确地进行搜索输入?如何使其成为通用的,例如在另一个对象列表中搜索?如何从搜索返回到父组件?

现在,在react dev工具中,无论我在那里键入什么,我都会得到 length: 0

谢谢你的建议!

编辑:

如果需要,我的 JS项目 组件:

class Project extends Component {
  state = {
    showDetails: false
  };
  constructor(props) {
    super(props);
    this.state = {
       showDetails: false
    };
  }

  toggleShowProjects = () => {
    this.setState(prevState => ({
      showDetails: !prevState.showDetails
    }));
  };

  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem className="spread">
          {this.props.project.name}
        </ListGroupItem>
        <Button onClick={this.toggleShowProjects} bsStyle="primary">
          Details
        </Button>
        {this.state.showDetails && (
          <ProjectDetails project={this.props.project} />
        )}
      </ButtonToolbar>
    );
  }
}

export default Project;