@D_K_D
Чайник

Как добавить введённые данные в списки при этом не удаляя данные введённые раньше?

На сайте ввожу имя и фамилию. Как эти данные отобразить в <ul></ul>? То есть сколько ввожу имен и фамилий столько они и отображаются в <ul></ul>. Знаю, что надо использовать .map(), но когда я его использовал, он просто добавлял новые данные, а предыдущие удалял.
import React,{Component} from 'react';
import './App.css';

class PersonInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        first_name: "",
        last_name: ""
    };
    this.newFighterFirstname = this.newFighterFirstname.bind(this);
    this.newFighterLastname = this.newFighterLastname.bind(this);
    this.myButton=this.myButton.bind(this);
  }
  newFighterFirstname(event) {
    this.setState({first_name: event.target.value});
  }
  newFighterLastname(event) {
    this.setState({last_name: event.target.value});
  }
  myButton(event) {
  this.setState({last_name: ""});   //нужны для очищение полей в input
  this.setState({first_name: ""});   //нужны для очищение полей в input
  }
  render() {
    return (
      <div>
        <form >
          <input type="text" 
          placeholder="Имя" 
          value={this.state.first_name}
          onChange={this.newFighterFirstname} 
          /> 
          <input  type="text" 
          placeholder="Фамилия"
          value={this.state.last_name}
          onChange={this.newFighterLastname}
          />
          <button onClick={this.myButton}>Сохранить</button>      
          <ul>     //здесь должны отображаться сохранённые имена и фамилии
          </ul> 
        </form>
      </div>
    )
  }
}
export default PersonInput;
  • Вопрос задан
  • 58 просмотров
Решения вопроса 2
@cython
Думаю, что перед использованием react, нужно ещё js выучить.
Вы не сохраняете данные в массив, а всё время перезаписываете поля в state. Добавьте поле в state, где будете хранить массив сохранённых объектов, с данными об имени и фамилии. Таким образом можете его обновлять:
this.setState({
  ['имя_поля']: [...this.state['имя_поля'], {
    last_name: this.state.last_name,
    first_name: this.state.first_name
  }]
})
Ответ написан
kirbi1996
@kirbi1996
Нужно использовать спред чтобы они не перезатирали а добавляли
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Leningrad Media Санкт-Петербург
от 100 000 до 150 000 ₽
SaveTime Москва
от 160 000 ₽
Сбербанк Санкт-Петербург
До 250 000 ₽
24 сент. 2020, в 02:31
700 руб./в час
24 сент. 2020, в 01:04
20000 руб./за проект
23 сент. 2020, в 23:49
500 руб./за проект