Реагировать на проблему привязки с 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, однако входной индекс неверен, иногда это не тот индекс, который должен быть. Я понятия не имею, где идет не так.

например.

todo1

todo2

todo3

Если нажать todo3, todo1 исчезнет.

Answer 1

, если вы хотите вызвать вашу функцию как

onClick={this.handleItemDelete(i)}

затем напишите свою функцию следующим образом

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

Answer 2

Вы не передаете индекс функции 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 3

Функция стрелки не имеет своего собственного this, но она имеет значение this окружающего контекста выполнения. Функции стрелок лексически связывают свой контекст, так что это фактически относится к исходному контексту. Это называется Lexical Scoping, если вы любите называть вещи. По сути, это избавляет нас от использования .bind (this) в нашем коде. Обратите внимание, что это экспериментальная функция в JS, что означает, что она еще не принята в стандарт ECMAScript

Итак, вы можете использовать его, как показано ниже:

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

В вашем методе рендеринга вы делаете что-то вроде:

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

Подробнее о функциях стрелок в этой статье:

Arrow_functions в деталях

Answer 4

Попробуйте передать индекс вручную следующим образом:

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