Я пытаюсь написать функцию, которая может удалить выбранный компонент и показать результат после удаления в окне поиска.Однако, когда я удалял другие элементы, он также всегда удаляет и первый.
Вот компонент высшего порядка, который содержит компонент окна поиска
export default class Tagsearch extends Component {
constructor(props) {
super(props);
this.state = {
hitsDisplay:false,
inputContent:"",
tags:[]
};
}
handleRemoveItem = (index) => {
this.setState(state => ({
tags: state.tags.filter((tag, i) => i !== index)
}));
}
handleSelect = value => {
this.setState(prevState => ({
tags:[...prevState.tags, value]
}));
this.setState({ selected:true })
}
openDisplay = () => {
this.setState({ hitsDisplay: true })
}
closeDisplay = () => {
this.setState({ hitsDisplay: false })
}
render() {
let result = (
<div className="container-fluid" id="results">
</div>
)
if (this.state.hitsDisplay) {
result = (
<Flexbox
flexDirection="column"
minHeight="100vh"
>
<div className="rows">
<MyHits handleSelect={this.handleSelect}/>
</div>
</Flexbox>
)
}
return (
<InstantSearch
appId="********"
apiKey="**************************"
indexName="tags"
>
<CustomSearchBox
handleRemoveItem={this.handleRemoveItem}
tags={this.state.tags}
styles={styles}
openDisplay={this.openDisplay}
closeDisplay={this.closeDisplay}
/>
{result}
</InstantSearch>
)
}
}
Вот код компонента окна поиска
import React, { Component } from 'react'
import { connectSearchBox } from 'react-instantsearch-dom';
const CustomSearchBox = ({ currentRefinement, refine, openDisplay, closeDisplay, styles, tags, handleRemoveItem, ...props }) => {
const handleChange = (e, refine) => {
const value = e.target.value
refine(value)
if (value !== "") {
openDisplay();
} else {
closeDisplay();
}
}
let inputTags = (
tags.map((tag, i) =>
<li key={i} style={styles.items}>
{tag}
<button
onClick={() => handleRemoveItem(i)}
>
(x)
</button>
</li>
)
)
return (
<label>
<ul style={styles.container}>
{inputTags}
<input
style={styles.input}
type="text"
value={currentRefinement}
onChange={e => handleChange(e, refine)}
/>
</ul>
</label>
)
}
export default connectSearchBox(CustomSearchBox);
Я просто хотел удалитьэлемент, который я нажимаю на кнопку.Поэтому, если я нажму третью кнопку удаления, третий элемент будет удален, а первый будет сохранен.
Я сопоставляю свой массив с компонентом более низкого уровня и передаю цель компоненту более высокого уровня.Даже если я передам имя цели вместо индекса, она удалит и цель, и первый элемент.Сравните с возможным повторяющимся вопросом, его проблема заключается в удалении последнего, но мой удалит и первый, и целевой.