我正在制作我的第一个 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;
最佳答案
要创建“通用”搜索框,也许您可以执行以下操作:
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>
关于javascript - ReactJS 即时搜索输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53805638/