3

我只是不能在函数中传递当前项目，因为我在“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'));
4

2 回答 2

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});
}
于 2018-03-23T06:41:57.467 回答
0

将您的 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>
于 2018-03-23T06:43:37.097 回答