如何将当前项传递给函数，以便我可以从react组件中的数组中删除它？

Question

我只是无法传递函数中的当前项，因为我在“X”中有一个单击事件，这是一个不同的节点，所以我总是将项目传递为X而不是数组中的项目。 我正在考虑将它作为一个不同的组件并导入它，但我只是想看看我在这里有什么东西，我将如何删除。 所以我的主要问题是如何传递数组中的当前项。 这是我的代码

export default class App extends Component {
constructor(props) {
    super(props)
    this.state = {
        fruits: ["apple", "orange", "mango", "banana"],
        name: "Micheal"
    }
    // this.handleClick = this.handleClick.bind(this);

}

delItem(item) {
    console.log('Click happened');
    console.log(item)
    //console.log(item.target.innerText) //x
    console.log(this.state.fruits)
    var newList = this.state.fruits.filter(val => {
        return item != val
    })
    console.log(newList);
    // this.setState({
    //     fruits : newList
    // })

}

render() {
    var fruitsList = this.state.fruits.map(item => {
        return (
            <li>
                <h1> {item} </h1>
                <p className="del-btn" onClick={this.delItem.bind(this)}> x </p>
            </li>
        )
    })

    return (
        <div>
            <div>
                <h1> Hello {this.state.name} from inside a component </h1>
                <About></About>
            </div>
            <div>
                <ul>
                    {fruitsList}
                </ul>
            </div>
        </div>
    )
 }
}


render(<App name="Milan" />, document.getElementById('app'));

Answer 1

好吧，您可以选择直接在函数onClick中发送项目参考 - this.delItem.bind(this, item)

delItem(item) {
   let fruits= this.state.fruits;

   function findFruit(element, index, array){
        return element==item;
   }

   let index = fruits.findIndex(findFruit);
   fruits.splice(index,1);
   this.setState({fruits : fruits});
}

Answer 2

将delItem函数更改为更高阶...您可以将delItem（）作为返回函数的函数，并且该函数可以使用传递给delItem（）函数的参数...传递水果！

delItem = (fruit) => () => {
  console.log('Click happened');
  console.log(item)

  // delete your fruit
}

然后绑定onClick如下：

<p className="del-btn" onClick={this.delItem(item)}> x </p>