javascript - ReactJS 即时搜索输入

Question

我正在制作我的第一个 React 项目。我是 JS、HTML、CSS 甚至网络应用程序编程的新手。

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

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

我有两个组件，我的 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;

... 和 ProjectList.js 显示 Project.js:

Search.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;

我的项目 有name 属性。你能告诉我如何编写 Search.js 组件的代码，以根据文本标签中的输入动态更改显示 projects 吗？例如，如果输入的文本匹配，返回项目(我想动态搜索它，当我开始输入m时...它显示所有项目开始于m 等)。

如何正确地进行搜索输入？如何使其具有通用性，例如在另一个对象列表中搜索？以及如何将搜索的输入返回给父组件？

现在，在 React 开发工具中，无论我在那里输入什么，我都会得到 length: 0

感谢您的任何建议!

编辑:

如果需要，我的 Project.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;

Answer 1

要创建“通用”搜索框，也许您可​​以执行以下操作:

class Search extends React.Component {

  componentDidMount() {

    const { projects, filterProject, onUpdateProjects } = this.props;
    onUpdateProjects(projects);
  }

  handleInputChange = (event) => {

    const query = event.currentTarget.value;
    const { projects, filterProject, onUpdateProjects } = this.props;

    const filteredProjects = projects.filter(project => !query || filterProject(query, project));

    onUpdateProjects(filteredProjects);
  };

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

本修订版Search需要一些额外的 props这允许它根据需要重复使用。除了projects prop，你也传filterProject和 onUpdateProjects由调用代码提供的回调。 filterProject回调允许您为每个 <Search/> 提供自定义过滤逻辑组件呈现。 onUpdateProjects回调基本上返回项目的“过滤列表”，适合在父组件中呈现(即 <ProjectList/> )。

此处唯一的其他重大变化是添加了 visibleProjects。到 <ProjectList/> 的状态它跟踪 projects 的原始列表中的可见(即过滤)项目传递给 <ProjectList/> :

class Project extends React.Component {
  render() {
    return (
      <div>{ this.props.project }</div>
    );
  }
}

class ProjectsList extends React.Component {

  componentWillMount() {
    
    this.setState({ visibleProjects : [] })
  }

  render() {
    return (
      <div>
        <Search projects={this.props.projects} filterProject={ (query,project) => (project == query) } onUpdateProjects={ projects => this.setState({ visibleProjects : projects }) }  />
        <div>
          {this.state.visibleProjects.map(project => {
            return <Project project={project} key={project.id} />;
          })}
        </div>
      </div>
    );
  }
}

class Search extends React.Component {
  
  componentDidMount() {
    
    const { projects, filterProject, onUpdateProjects } = this.props;
    onUpdateProjects(projects);
  }
  
  handleInputChange = (event) => {
    
    const query = event.currentTarget.value;
    const { projects, filterProject, onUpdateProjects } = this.props;
    
    const filteredProjects = projects.filter(project => !query || filterProject(query, project));
    
    onUpdateProjects(filteredProjects);
  };

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

ReactDOM.render(
  <ProjectsList projects={[0,1,2,3]} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>