Reactjs 用ES6解决绑定问题 import React，{Component}来自'React'； 从“antd”导入{Button}； 从“antd”导入{菜单，下拉列表，图标}； 从“antd”导入{Input}； 从“antd”导入{List}； 类TodoList扩展组件{ 状态={ 输入：“”， 列表：['todo1'，'todo2'] } render（）{ 返回( 点击我 { this.state.list.map（（项，索引）=>{ 返回( {item} ) }) } ); } handleInputChange=（e）=>{ 这是我的国家({ 输入：e.target.value }) } 把手点击=（）=>{ 这是我的国家({ 列表：[…this.state.list，this.state.input]， 输入：“” }) } handleItemDelete=（索引）=>{ const list=[…this.state.list]；//复制 list.splice（索引，1）；//从索引开始，删除一个元素 这是我的国家({ 列表：列表 }) } } 将默认值导出到列表；

我是一个有反应的初学者。 我在写托多利斯特。 我已经知道函数需要绑定到组件中，所以我使用ES6箭头函数来做同样的事情

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

e、 g

待办事项

todo2

todo3

---

如果单击todo3，todo1将消失。

尝试手动传递索引，如下所示：

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;

---

调用handleItemDelete函数时，您没有将索引传递给该函数。按照您使用它的方式，您将获得

event

作为参数。为了获得索引，您可以从事件中使用它，这应该是一种首选方法，如

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

{
this.state.list.map（（项，索引）=>{
返回(

{item}

)
})
}

handleItemDelete=（事件）=>{
常量索引=event.target.id；
const list=[…this.state.list]；//复制
list.splice（索引，1）；//从索引开始，删除一个元素
这是我的国家({
列表：列表
})
}

但是，您可以通过使用arrow函数并将其作为参数传递来实现相同的功能，如

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

this.handleItemDelete（索引）}
>
{item}

---

还请看一看

箭头函数没有自己的this，但它具有封闭执行上下文的this值。箭头函数在词汇上绑定其上下文，因此这实际上是指原始上下文。如果你喜欢命名事物，那就叫做词汇范围。基本上，它避免了我们在代码中进行.bind（这个）。请注意，这是JS中的一个实验性特性，这意味着它尚未被ECMAScript标准接受

因此，您可以按如下方式使用它：

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

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

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

类TodoList扩展组件{
render（）{
返回(
this.handleItemToDelete（索引）}
>
{item}

);
}
}

---

如果您想像这样调用函数

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

然后像这样编写函数

onClick={this.handleItemDelete(i)}

---

您没有将任何索引传递给

handleItemDelete

。它所能得到的，就是这次活动。非常感谢！这很有效，我从你给我的链接中学到了很多。

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