渲染动态元素reactjs？

Question

因此，我试图用几个HTML输入创建一个动态表单。我有一个对象表单数组，其中包含应该呈现的输入的类型。目前，我能够呈现两个输入，如文本区域，但我如何处理收音机，复选框，选择连同他们的选项？任何帮助都将不胜感激。

请参见此CodeSandBox。

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;

<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>

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>