Как динамически генерировать пару полей ввода с помощью реакции

58
6

Я попробовал следующий код, чтобы создать реактивную форму для динамического создания полей ввода, чтобы поочередно вводить последовательность имени человека. Но пользователю нужно ввести first name и last name вместо name. Таким образом, форма должна генерировать пару динамических полей ввода. Я новичок в react. Может кто-нибудь, пожалуйста, дать понять, как это сделать.

Примечание. Следующий код был взят из ответа stackoverflow @Mayank Shukla в разделе Как реализовать динамическую форму с контролируемыми компонентами в React.JS? ,

class App extends React.Component {
constructor(props) {
super(props);
this.state = { values: [] };
this.handleSubmit = this.handleSubmit.bind(this);
}

createUI(){
return this.state.values.map((el, i) =>
<div key={i}>
<input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />
<input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
</div>
)
}

handleChange(i, event) {
let values = [...this.state.values];
values[i] = event.target.value;
this.setState({ values });
}

addClick(){
this.setState(prevState => ({ values: [...prevState.values, '']}))
}

removeClick(i){
let values = [...this.state.values];
values.splice(i,1);
this.setState({ values });
}

handleSubmit(event) {
alert('A name was submitted: ' + this.state.values.join(', '));
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
{this.createUI()}
<input type='button' value='add more' onClick={this.addClick.bind(this)}/>
<input type="submit" value="Submit" />
</form>
);
}
}

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

спросил(а) 2018-07-21T19:04:00+03:00 2 года, 3 месяца назад
1
Решение
70

Идея - поддерживать массив объектов в переменной состояния. Каждый объект будет иметь два ключа firstName и secondName (вы можете добавить больше полей). Относитесь к каждому объекту как к единому модулю и для всех элементов визуализации ввода, и всякий раз, когда пользователь нажимает на добавление, добавьте еще один объект/запись в массив с двумя ключами.

Рабочий скрипт.

Рабочий фрагмент:

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [{firstName: "", lastName: ""}]
};
this.handleSubmit = this.handleSubmit.bind(this);
}

addClick(){
this.setState(prevState => ({
users: [...prevState.users, { firstName: "", lastName: "" }]
}))
}

createUI(){
return this.state.users.map((el, i) => (
<div key={i}>
<input placeholder="First Name" name="firstName" value={el.firstName ||''} onChange={this.handleChange.bind(this, i)} />
<input placeholder="Last Name" name="lastName" value={el.lastName ||''} onChange={this.handleChange.bind(this, i)} />
<input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
</div>
))
}

handleChange(i, e) {
const { name, value } = e.target;
let users = [...this.state.users];
users[i] = {...users[i], [name]: value};
this.setState({ users });
}

removeClick(i){
let users = [...this.state.users];
users.splice(i, 1);
this.setState({ users });
}

handleSubmit(event) {
alert('A name was submitted: ' + JSON.stringify(this.state.users));
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
{this.createUI()}
<input type='button' value='add more' onClick={this.addClick.bind(this)}/>
<input type="submit" value="Submit" />
</form>
);
}
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container" />

ответил(а) 2018-07-22T10:13:00+03:00 2 года, 3 месяца назад
42

Попробуй это

state = {
number: [""],
dataArr: []
}

render() {
return (
<div>
<div onClick={()=>this.setState(prevState => ({number: [...prevState.number, ""]}))}>Add More element</div>
{this.state.number.map((e, i)=> {
return (
<input value={this.state.number[i]} onChange={(data) => this.setState({dataArr: update(this.state.dataArr, {i: {$set: data}})})} />
)
})}
</div>
)
}

Вам придется обрабатывать данные внутри this.state.dataArr. Например, this.state.dataAtt[0] будет содержать начальное значение в поле ввода, прежде чем пользователь this.state.dataAtt[0] кнопку "Добавить больше элементов", а затем, когда пользователь нажмет эту же кнопку, снова будут добавлены данные в this.state.dataArr[1] и так далее.

Вам понадобится react-addons-update lib.

ответил(а) 2018-07-21T19:39:00+03:00 2 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема