reactjs - 用 ES6 反应绑定问题

Question

import React, { Component } from 'react';
import { Button } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
import { Input } from 'antd';
import { List } from 'antd';

class TodoList extends Component {
    state = {
        input: '',
        list: ['todo1', 'todo2']
    }

    render() {
        return (
            <div>
                <Input
                    onChange={this.handleInputChange}
                    value={this.state.input}
                />
                <Button
                    type="primary"
                    onClick={this.handleBtnClick}
                >
                    click me
                </Button>
                <ul>
                    {
                        this.state.list.map((item, index)=> {
                            return (
                                <li key={index}
                                    onClick={this.handleItemDelete}
                                >
                                    {item}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }

    handleInputChange = (e)=>{
        this.setState({
            input: e.target.value
        })
    }

    handleBtnClick = ()=>{
        this.setState({
            list: [...this.state.list, this.state.input],
            input: ''
        })
    }

    handleItemDelete = (index)=>{
        const list = [...this.state.list]; // copy
        list.splice(index, 1); // start from index, delete one element 
        this.setState({
            list: list
        })
    }
}

export default TodoList;

我是 React 的初学者。我正在写一个 TodoList。我已经知道该函数需要在组件中绑定，所以我使用 ES6 箭头函数来做同样的事情。

handleItemDelete 使用 ES6 箭头函数进行绑定，但是输入的索引不正确，有时它不是正确的索引。我不知道哪里出了问题。

例如

待办事项1

待办事项2

待办事项3

如果单击 todo3，则 todo1 消失。

Answer 1

在调用它时，您没有将 index 传递给 handleItemDelete 函数。你使用它的方式，你会得到event作为论据。为了获取索引，您可以从事件中使用它，这应该是首选方法，例如

      <ul>
                {
                    this.state.list.map((item, index)=> {
                        return (
                            <li key={index}
                                id={index}
                                onClick={this.handleItemDelete}
                            >
                                {item}
                            </li>
                        )
                    })
                }
            </ul>



   handleItemDelete = (event)=>{
        const index = event.target.id;
        const list = [...this.state.list]; // copy
        list.splice(index, 1); // start from index, delete one element 
        this.setState({
            list: list
        })
    }

但是，您可以通过使用箭头函数并将其作为参数传递来实现相同的目的

<li key={index}
     onClick={() => this.handleItemDelete(index)}
>
      {item}
</li>

也请看看How to avoid binding inside render method

Answer 2

如果你想调用你的函数

onClick={this.handleItemDelete(i)}

然后像这样编写你的函数

handleItemDelete = i => e => {
    value = e.target.value;
};

Answer 3

箭头函数没有自己的 this，但它具有封闭执行上下文的 this 值。箭头函数在词法上绑定它们的上下文，因此 this 实际上是指原始上下文。如果你喜欢命名事物，这就是所谓的词法作用域。基本上，它使我们免于在代码中执行 .bind(this)。请注意，这是 JS 中的一项实验性功能，这意味着它尚未被 ECMAScript 标准所接受

所以，你可以像下面这样使用它：

onClick={() => this.handleItemToDelete(index)}

在您的渲染方法中，您执行以下操作：

class TodoList extends Component {
  render() {
    return (
        <li key={index}
           onClick={ () => this.handleItemToDelete(index) }
        >
           {item}
        </li>
    );
  }
}

在本文中阅读有关箭头函数的更多信息：

详细箭头函数

Answer 4

尝试像这样手动传递索引：

onClick={() => this.handleItemDelete(index)}