Когда я нажимаю кнопку добавления, он должен добавить ввод, и я должен его сохранить.
Что-то вроде это, но с 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>;
}
}
Я не думаю, что это тот же вопрос здесь, потому что он что-то использует для подсчета. Может, есть другой способ? Или это единственный способ?
Просто возьмите пример, который вы предоставили, и измените входные данные. Вы можете сохранить массив элементов JSX и отобразить его на странице. Когда пользователь нажимает кнопку «Добавить», просто вставьте новый ввод в этот массив.
Возможный дубликат Добавить входные данные в React с помощью кнопки добавления



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Скажем, у вас есть массив различных входных данных,
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}
)
}
Чем это отличается от связанного вопроса?