Question

所以我试图用几个HTML输入创建一个动态表单。我有一个对象Forms数组，其中包含应该呈现的type的{{1}}。目前，我能够渲染几个输入，例如文本区域，但是我该如何处理收音机，复选框，选择及其选项？任何帮助将不胜感激。

检查此示例代码：-

input

class App extends React.Component {
  state = {
    Forms: [{
        name: "select",
        type: "select",
        options: ["a", "b", "c"]
      },
      {
        name: "Radio",
        type: "radio",
        options: ["a", "b", "c"]
      },
      {
        name: "Date",
        type: "date",
        value: "2018-07-22"
      },
      {
        name: "Text Input",
        type: "text",
        value: "text input"
      },
      {
        name: "Checkbox",
        type: "checkbox",
        options: ["a", "b", "c"]
      },
      {
        name: "Textarea",
        type: "textarea",
        value: "text area"
      }
    ]
  };

  renderForm = () => {
    return this.state.Forms.map((form, index) => ( <
      label key = {index} > { form.name} 
      <input type = { form.type }
      value = { form.value } /> 
      <select/ >
      </label>
    ));
  };

  render() {
    return <div > {
      this.renderForm()
    } < /div>;
  }
}

export default App;

感谢您的所有帮助。：）

Answer 1

您需要以不同的方式处理不同的表单类型。查看更新示例：

class App extends React.Component {
  state = {
    Forms: [{
        name: "select",
        type: "select",
        options: ["a", "b", "c"]
      },
      {
        name: "Radio",
        type: "radio",
        options: ["a", "b", "c"]
      },
      {
        name: "Date",
        type: "date",
        value: "2018-07-22"
      },
      {
        name: "Text Input",
        type: "text",
        value: "text input"
      },
      {
        name: "Checkbox",
        type: "checkbox",
        options: ["a", "b", "c"]
      },
      {
        name: "Textarea",
        type: "textarea",
        value: "text area"
      }
    ]
  };

  renderForm = () => {
    return this.state.Forms.map((form, index) => {
      if (form.type === 'checkbox' || form.type === 'radio') {
        return (
          <span>
            {form.name}
            {form.options.map(opt => (
              <label key={opt}>
                <input type={form.type} group={form.name} value={opt} />
                {opt}
              </label>
            ))}
          </span>
        );
      }
      
      if (form.type === 'select') {
        return (
          <label key={index}>{form.name} 
            <select>
              {form.options.map(opt => (
                <option key={opt}>
                  {opt}
                </option>
              ))}
            </select>
          </label>
        );
      }
      
      return (
        <label key={index}>{form.name} 
          <input type={form.type} value={form.value} /> 
        </label>
      );
    });
  };

  render() {
    return <div > {
      this.renderForm()
    } < /div>;
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

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

<div id="app"></div>

Answer 2

类似的东西：

import React from "react";
import "./styles.css";

class App extends React.Component {
  state = {
    Forms: [
      { name: "select", type: "select", options: ["a", "b", "c"] },
      { name: "Radio", type: "radio", options: ["a", "b", "c"] },
      { name: "Date", type: "date", value: "2018-07-22" },
      { name: "Text Input", type: "text", value: "text input" },
      { name: "Checkbox", type: "checkbox", options: ["a", "b", "c"] },
      { name: "Textarea", type: "textarea", value: "text area" }
    ]
  };

  getField = (field) => {
    switch(field.type) {
      case 'date':
      case 'text':
      case 'textarea':
        return <input type={field.type} value={field.value} />;
      case 'select':
          return <select name={field}>
            {field.options.map(option =>
              <option key={option} value={option}>{option}</option>
            )};
          </select>;
      case 'radio':
      case 'checkbox':
          return <div>{field.options.map((option) =>
            <label>
              {option}: 
              <input key={option} type={field.type} name={option} value={option}/>
            </label>
          )}</div>;
      default:
        return <div>Unknown form field</div>;
    }
  }

  renderForm = () => {
    return this.state.Forms.map((field, index) => (
      <label key={index}>
        {field.name}
        {this.getField(field)}
      </label>
    ));
  };

  render() {
    return <div>{this.renderForm()}</div>;
  }
}

export default App;

渲染动态元素ReactJS？

2 个答案: