[英]How to display the data related when an option is clicked on drop down?
I have a drop-down list which is coming from the query and when I click on the option the related data should display.我有一个来自查询的下拉列表,当我单击该选项时,应显示相关数据。 I have this drop-down as shown in image
我有这个下拉菜单,如图所示
How to display the option only once.如何只显示一次选项。
I have this below code:我有以下代码:
class StoreLocator extends PureComponent {
constructor(props) {
super(props)
this.state = {
options : [],
}
}
getStoreLocatorDropdown(){
return(
<div>
<select>
<option value="" hidden>Select product/service type</option>
{
this.state.options.map((obj) => {
return <option value={obj.id} changeOption={this.handleChange}>{obj.name}</option>
})
}
</select>
</div>
)
}
handleChange(){
console.log("clicked")
}
async componentDidMount(){
let storeLocatorQuery = StoreLocatorInstance.getStoreLocator()
await fetchQuery(storeLocatorQuery).then((data) => {
this.setState({
options : data.storeLocatorLocations.items
})
this.getStoreLocatorDropdown()
},
(error) => console.log(error)
)
}
render() {
return (
<div>
<h1>Store Locator</h1>
<div>
{this.getStoreLocatorDropdown()}
</div>
</div>
)
}
}
export default StoreLocator
How to display option only once when it's values are repeated.如何在重复值时仅显示一次选项。 And how to make it clickable and display its related data
以及如何使其可点击并显示其相关数据
Seems like what you are trying to do is to only show the unique/distinct options in the drop down list.似乎您要做的只是在下拉列表中显示唯一/不同的选项。
One of the manual way you can resolve this is to filter your options datasource first.您可以解决此问题的一种手动方法是首先过滤您的选项数据源。 In your case, it is the "this.state.options"
在您的情况下,它是“this.state.options”
Inside your "componentDidMount" function, you can filter it before setting the value into your state:在您的“componentDidMount”function 中,您可以在将值设置到 state 之前对其进行过滤:
var data = [
{ id: 1, name: 'Partsandservices' },
{ id: 2, name: 'Partsandservices' },
{ id: 3, name: 'Petromin' }
];
data.map(item => item.name)
.filter((value, index, self) => self.indexOf(value) === index)
// this should return you ["Partsandservices", "Petromin"]
However, this is not a recommended approach, as the root cause of this duplication should be resolved from the deepest level, which is from the "StoreLocatorInstance.getStoreLocator()".但是,这不是推荐的方法,因为这种重复的根本原因应该从最深层次解决,即“StoreLocatorInstance.getStoreLocator()”。
Since the options returned are repeated name on "Partsandservices", does it contains different meaning?由于返回的选项是“Partsandservices”上的重复名称,它是否包含不同的含义?
Maybe Partsandservices in Location A and Partsandservices in Location B?可能是位置 A 的 Partsandservices 和位置 B 的 Partsandservices? Or was it a mistake for returning two same names to your application?
还是将两个相同的名称返回到您的应用程序是一个错误?
You should check on that.你应该检查一下。
To stop duplicate values from being displayed on your options list you can add an additional array(duplicateCheck) which would make sure that the values are not repeating要阻止重复值显示在您的选项列表中,您可以添加一个额外的数组(duplicateCheck),以确保这些值不会重复
in your options list:在您的选项列表中:
let duplicateCheck=[];
this.state.options.map((obj) => {
if(duplicateCheck.includes(obj.name))
{
return (null);
}
else
{
duplicateCheck.push(obj.name);
return <option value={obj.id} changeOption={this.handleChange}>{obj.name}</option>}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.