时间戳

首页 > 解决方案 > 如何在 React 中制作动态表单

reactjs - 如何在 React 中制作动态表单

问题描述

我正在学习反应。我的目标是制作这个对象：

"Phones": [
  {
    "Type": "Mobile",
    "Phone_Number": "6546543"
  },
  {
    "Type": "Home",
    "Phone_Number": "6546543"
  }
]

我做了一些研究，并关注了这个 YouTube 视频ReactJS - 动态添加多个输入字段。

我将从表单中获取这些值。用户可以继续添加任意数量的数字。我的代码是：

  render() {
    return (
      <div>
        <h1>The Form</h1>
        <label>Contact</label>
        {this.state.phones.map((phone, index) => {
          return (
            <div key={index}>
              <input onChange={(e) => this.handleChange(e)} value={phone} />
              <select>
                {this.phoneTypes.map((phoneType, index) => {
                  return (
                    <option key={index} value={phoneType}>
                      {phoneType}
                    </option>
                  );
                })}
              </select>
              <button onClick={(e) => this.handleRemove(e)}>Remove </button>
            </div>
          );
        })}
        <hr />
        <button onClick={(e) => this.addContact(e)}>Add contact</button>
        <hr />
        <button onClick={(e) => this.handleSubmit(e)}>Submit</button>
      </div>
    );
  }

我没有在这里粘贴整个代码，因为我已经创建了一个stackblitz。我的代码没有按预期工作。请投入。

标签： reactjs

解决方案

您需要在handleChange函数中为输入字段传递索引。我猜你错过了视频中的那部分。这将使输入字段可编辑。

      <input
        onChange={(e) => this.handleChange(e, index)}
        value={phone}
      />

对于获得预期对象数组的第二部分，我更新了一些代码，请检查：

import React, { Component } from 'react';

class Questionnaire extends Component {
  state = {
    phones: [{ type: '', number: '' }],
  };

  phoneTypes = ['Mobile', 'Home', 'Office'];

  addContact() {
    this.setState({ phones: [...this.state.phones, { type: '', number: '' }] });
  }

  handleChange(e, index) {
    this.state.phones[index]['number'] = e.target.value;
    this.setState({ phones: this.state.phones });
  }

  handleRemove(index) {
    this.state.phones.splice(index, 1);
    console.log(this.state.phones, '$$$');
    this.setState({ phones: this.state.phones });
  }

  handleSubmit(e) {
    console.log(this.state, '$$$');
  }

  render() {
    return (
      <div>
        <h1>The Form</h1>
        <label>Contact</label>
        {this.state.phones.map((phone, index) => {
          return (
            <div key={index}>
              <input
                onChange={(e) => this.handleChange(e, index)}
                value={phone.number}
                name="number"
              />
              <select>
                {this.phoneTypes.map((phoneType, index) => {
                  return (
                    <option key={index} value={phoneType} name="type">
                      {phoneType}
                    </option>
                  );
                })}
              </select>
              <button onClick={(e) => this.handleRemove(e)}>Remove </button>
            </div>
          );
        })}
        <hr />
        <button onClick={(e) => this.addContact(e)}>Add contact</button>
        <hr />
        <button onClick={(e) => this.handleSubmit(e)}>Submit</button>
      </div>
    );
  }
}

export default Questionnaire;

推荐阅读