Как я могу удалить правильную текстовую область? - PullRequest
Новая
       36

Как я могу удалить правильную текстовую область?

1 голос
/ 03 июля 2019

Я пытаюсь удалить текстовое поле в определенном месте, используя соединение. При объединении массива он получается, как и ожидалось. Но по какой-то причине текстовая область в конце - это текстовая область, которая удаляется, а не текстовая область, которую я хочу удалить.

Я уже пробовал использовать 2 разных массива, но результат тот же. Я не уверен, что еще попробовать. 

class App extends Component {

  state = {
    pro : []
  }

  //onclick add a textarea
  onclick = () => {

    let arr = this.state.pro;

    arr = this.state.pro.concat(0);

    this.setState(
      {
        pro : arr
      }
    )

    console.log(arr);
  }

  //change the text content of a textarea at an index

  onchange = (i, e) => {
    let arr = this.state.pro;

    arr[i] = e.target.value;

    this.setState(
      {
        pro : arr
      }
    )
  }

  remove = (i, e) => {
    let arr = this.state.pro
     arr.splice(i, 1)

     this.setState(
      {
          pro: arr
      })
  }

  render() {

    console.log(this.state.pro)

    return (
      <div>

        {this.state.pro.map((con, k) => 
            <div key = {k}>
              <textarea key = {k} onChange = {this.onchange.bind(this, k)}></textarea>
              <button onClick = {this.remove.bind(this, k)}>-</button>
            </div>
        )}

        <button onClick = {this.onclick}>+</button>
      </div>
    );
  }
}

Нет сообщений об ошибках. Ожидаемым результатом будет удаление ПРАВИЛЬНОЙ текстовой области, когда я нажимаю кнопку минус рядом с ней. Не топ каждый раз.

1 Ответ

1 голос
/ 03 июля 2019

Поскольку ваше значение textarea не контролируется вашим состоянием.

  • Установить атрибут value в textarea
  • Вам не нужно связываться, если вы используетеФункция стрелки
  • key не обязательна для textarea
return (
            <div>

                {this.state.pro.map((con, k) =>
                    <div key = {k}>
                        <textarea value={con} onChange = {(e) => this.onchange(k, e)}/>
                        <button onClick = {(e) => this.remove(k, e)}>-</button>
                    </div>
                )}

                <button onClick = {this.onclick}>+</button>
            </div>
        );
...