Удаление элемента?

Question

[Proroks]

Подскажите пожалуйста почему не работает? https://codepen.io/anon/pen/awvXRR
Нужно по клику на элемент удалять его

Answer 1

[Максим]

class App extends React.Component {
  constructor(){
    super();
    this.state ={
      count: [1,2,3,4,5,6,7,8,9]
    }
  }
  removeCount(idx){ // <= здесь было idk (опечатка)
    let newItems = this.state.count;
    newItems.splice(idx, 1);
    this.setState({count: newItems});
  }
  render() {
    const self = this
    const list = this.state.count.map(function(index, i){
      // здесь у вас был не тот this, так как вы используете обычную функцию, а не стрелочную, "this равный компоненту" теряется, чтобы разобраться можете тут сконослить this и self
      return <div key={i} onClick={self.removeCount.bind(self, i)}><p>{index}</p></div>
    })
    return (
      <div className="row">
       {list}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Comments

[Proroks]

Спасибо, а стрелочная функция бы так выглядела?

removeCount = (idx => {
     let newItems = this.state.count;
    newItems.splice(idx, 1);
    this.setState({count: newItems});
  });

[Максим]

Proroks: не так, и не там. Стрелочная функция вам нужна в map'e

Answer 2

[Виктор Стороженко]

Если я правильно понял проблему, то вы хотите, привязать к обработчику onClick индекс элемента. Я предпочитаю делать это через замыкания.
Попутно советую перенести bind в конструктор.
Кстате, bind можно не делать, если заменить объявление метода на стрелочный синтаксис тогда все станет намного наглядней метод будет выглядеть вот так и как я сказал bind не нужен:

removeCount = (idx) => (/*сюда будет передан event, но он вам типа не нужен*/) => {
  /* тело с this, он будет autobinded */
}

Конструктор тоже будет не нужен, можно просто написать state

class App extends React.Component {
  //constructor(){
  //  super();
  //  this.state ={
  //   count: [1,2,3,4,5,6,7,8,9]
  //  }
  //  this.removeCount = this.removeCount.bind(this)
  //}
  this.state = {
    count: [1,2,3,4,5,6,7,8,9]
  };
  /*...*/
}

Но я сохранил твой вариант
Если заменить метод splice на не мутирующий slice, то тело функции станет одной строкой без доп. переменных. Подсказка в коде

class App extends React.Component {
  constructor(){
    super();
    this.state ={
      count: [1,2,3,4,5,6,7,8,9]
    }
  this.removeCount = this.removeCount.bind(this)
  }
  removeCount(idx) {
    return function() {
      let newItems = this.state.count;
      newItems.splice(idx, 1);
      this.setState({count: newItems});
      // this.setState({count: this.state.count.slice(/*чо нада*/)});
      // все что выше в методе тогда не нужно
    }
  }
  render() {
    const list = this.state.count.map(function(index, i){
      return (
        <div 
          key={i} 
          onClick={this.removeCount(i)}>
            <p>{index}</p>
        </div>
      );
    })
    return (
      <div className="row">
       {list}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Ну ОК, мой вариант выглядел бы так (возможны опечатки, пишу прям тут)

class App extends React.Component {
   state ={
     count: [1,2,3,4,5,6,7,8,9]
  }
  removeCount = (idx) => () => {
    this.setState({count: this.state.count.slice(idx, 1)});
  }
  render() {
    return (
      <div className="row">
       {this.state.count.map(i => (
          <div 
            key={i} 
            onClick={this.removeCount(i)}>
              <p>{i}</p>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));