Как динамически генерировать пару полей ввода, используя реагировать

Question

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

Примечание. Следующий код был взят из ответа stackru @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'));

Answer 1

Идея в том, чтобы поддерживать массив объектов в переменной состояния. Каждый объект будет иметь два ключа 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" />

Answer 2

Попробуй это

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.dataArr[1] и так далее.

Тебе понадобится react-addons-update Lib.