Добавить ввод с помощью кнопки добавления в React

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

Что-то вроде это, но с Input. Но проблема в том, что ввод все разные, поэтому я не знаю, как это сделать.

Мой код:

class Main extends Component {
  constructor(props) {
    super(props);
    this.handleChangeEventCategorie = this.handleChangeEventCategorie.bind(this);
    this.state = {
      // I think it should be an array but I don't know
      valueCategorie: ""
    };
  }
  addCategorie(){
    //Something to add input 
  }
  handleSubmit() {
    //Make something with the categorie
  }

  handleChangeEventCategorie(e) {
    // I don't know if I can use this function for all Input
    this.setState({ valueCategorie: e.target.value });
  }
  render() {
    return <div className = "container">              
        <input type = "text" value = {this.state.valueCategorie} onChange = {this.handleChangeEventCategorie} />
        <Button onClick = {this.addCategorie}>Add Input</Button>
        <Button onClick = {this.handleSubmit}>Send</Button>
      </div>;
  }
}

Я не думаю, что это тот же вопрос здесь, потому что он что-то использует для подсчета. Может, есть другой способ? Или это единственный способ?

Чем это отличается от связанного вопроса?

VTodorov 29.05.2018 13:47

Просто возьмите пример, который вы предоставили, и измените входные данные. Вы можете сохранить массив элементов JSX и отобразить его на странице. Когда пользователь нажимает кнопку «Добавить», просто вставьте новый ввод в этот массив.

Javid Askerov 29.05.2018 13:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
132
1

Ответы 1

Скажем, у вас есть массив различных входных данных,

let inputArray = [<input id = "1"/>,<input id = "2"/>,<input id = "3"/>]

Объявить состояние, state = { inputRenderingArray: [] }

Функции для динамического добавления ввода,

AddFirst=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[0]]})

AddSecond=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[1]]})

AddThird=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[2]]})

при рендеринге при нажатии кнопки добавления эти элементы помещаются в рендерируемый массив, оказывать(){

return(
   <Button onClick = {AddFirst}>Add First</Button>
   <Button onClick = {AddSecond}>Add Second</Button>
   <Button onClick = {AddSecond}>Add Second</Button>

   {this.state.inputsRenderingArray}
)

}

Другие вопросы по теме