1

我正在尝试编写一个函数，该函数可以删除我选择的组件并在搜索框中显示删除后的结果。但是，当我删除其他项目时，它总是会删除第一个项目。

这是包含搜索框组件的高阶组件

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);

我只是想删除我按下按钮的元素。因此，如果我按下第三个删除按钮，第三个元素将被删除，而第一个元素将持续存在。

我将数组映射到较低级别的组件中，并将目标传递给较高级别的组件。即使我传递目标本身的名称而不是索引，它也会删除目标和第一个元素。与可能的重复问题相比，它的问题是删除最后一个问题，但我的问题将删除第一个和目标问题。

4

0 回答 0