>我有3个组件:App,Map和ListPlaces。在ListPlaces组件中,当用户在输入元素中键入某些内容时,我想在App中更改状态(标记的状态.js以仅显示地图上的相关标记。
编辑:当我编辑我的错别字时,错误消失了。但是,我认为逻辑仍然是错误的。因为当我在输入元素中写入某些内容时,标记数组将立即为 0。当然,所有标记都消失了。
更多解释:
在 componentDidMount 之后,我的标记数组包含 7 个项目。地图组件采用此标记数组并在地图上呈现标记。但是,我需要根据输入元素的值控制 ListPlaces 组件中的标记。所以我把这个:onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
输入元素的 onChange 属性中。(省略 this.updateQuery,现在,您可以只关注 changeMarkersHandler(。
这个 changeMarkersHandler 在 App.js 中运行 changeMarker 函数,但我不知道为什么我的标记数组会在 changeMarker 函数工作时立即为 0。
注意:我正在使用 react-google-maps,并且省略了一些与问题无关的代码块。
应用.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
places: [],
markers: [],
markerID: -1,
newMarkers: []
};
this.changeMarkers = this.changeMarkers.bind(this);
}
componentDidMount() {
fetch("api_url")
.then(response => response.json())
.then(data => {
this.setState({
places: data.response.venues,
markers: data.response.venues
});
})
.catch(error => {
console.log("Someting went wrong ", error);
});
}
changeMarkers(value) {
const newMarkers = this.state.markers.filter(
place => place.name === value
);
this.setState({
newMarkers : newMarkers,
markers: newMarkers
})
}
render() {
return (
<div className="App">
<Map role="application"
places={this.state.places}
markers={this.state.markers}
openInfoHandler={this.openInfo}
closeInfoHandler={this.closeInfo}
markerID={this.state.markerID}
googleMapURL="url_here" />
<ListPlaces changeMarkersHandler={this.changeMarkers} />
</div>
);
}
}
列表地点.js
import React, { Component } from "react";
import escapeRegExp from "escape-string-regexp";
class ListPlaces extends Component {
state = {
searchQuery: ""
};
updateQuery = query => {
this.setState({ searchQuery: query});
};
render() {
const { toggleListHandler, locations, openInfoHandler, changeMarkersHandler} = this.props;
let showLocations;
if (this.state.searchQuery) {
const match = new RegExp(escapeRegExp(this.state.searchQuery), "i");
showLocations = locations.filter(location =>match.test(location.name));
} else {
showLocations = locations;
}
return (
<div>
<aside>
<h2>Restaurants</h2>
<nav>
<div className="search-area">
<input
className="search-input"
type="text"
placeholder="Search Restaurant"
value={this.state.searchQuery}
onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
/>
</div>
<ul>
{showLocations.map(location => {
return (
<li
key={location.id}
onClick={e =>
openInfoHandler(e, location.id)
}
>
{location.name}
</li>
);
})}
</ul>
</nav>
<p>some text</p>
</aside>
<a
onClick={toggleListHandler}
id="nav-toggle"
className="position"
>
<span />
</a>
</div>
);
}
}
export default ListPlaces;
构造函数中有拼写错误。
this.changeMarkers(this.changeMarkers.bind(this));
应该是
this.changeMarkers = this.changeMarkers.bind(this);