在ReactJs中使用Json数据创建表单

时间:2018-08-02 13:51:30

标签: javascript json reactjs forms render

我需要使用JSON数据创建一个表单。我已经完成创建,但是当我运行该时间文本框时,向我显示5次,我只需要1次文本框,然后选择打印5次,而我只需要1次,那么任何人都可以帮助我。

JSON数据

const data = {
  key: "Q1",
  label: "Which one is your favorite programming language?",
  choices: [
    { keydrop: "1", value: "JavaScript" },
    { keydrop: "2", value: "Python" },
    { keydrop: "3", value: "Go" },
    { keydrop: "4", value: "Other" }
  ]
};

renderForm = () => {
  let MdData = this.props.ModelData;

  let MdMap = MdData.map(m => {
    let MdKey = m.key;
    let MdType = m.type;
    let props = m.props;
    console.log(1);

    return (
      <div key={MdKey} className="form-group">
        <label className="form-label" key={"lbl" + m.key} htmlFor={m.key}>
          {m.key + ". " + m.label}
        </label>

        <input
          {...props}
          ref={key => {
            this[m.key] = MdKey;
          }}
          className="form-input"
          key={"txt" + m.key}
        />
        <select key={"drop" + m.key}>
          {m.choices.map(function(data) {
            return (
              <option key={m.choices.keydrop} value={data.value}>
                {data.value}
              </option>
            );
          })}
        </select>
      </div>
    );
  });
  return MdMap;
}

0 个答案:

没有答案