reactjs - 如何将当前项目传递给函数，以便我可以将其从 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});
}