Как создать динамическую форму html в reactjs с использованием данных json?

Question

Привет, может кто-нибудь помочь мне, как создать динамическую форму html в reactjs, используя форму данных json local. У меня есть нижний формат json, который содержит данные формы для трех полей.

{ 
"sampleData": 
    [{"indexId":"1", 
    "abrvIndexName":"firstname", 
    "indexDesc":"First Name", 
    "htmlControlType":"textbox", 
    "cssClassName":"form-control"}, 
    {"indexId":"2", 
    "abrvIndexName":"lastname", 
    "indexDesc":"Last Name", 
    "htmlControlType":"textbox", 
    "cssClassName":"form-control"} 
    {"indexId":"3", 
    "abrvIndexName":"address", 
    "indexDesc":"Address", 
    "htmlControlType":"textarea", 
    "cssClassName":"form-control"} 
    ] 
} 

и ниже это реагирует компонент для той формы, которую нужно создать динамически, как сейчас у меня есть 3 поля, которые являются статическими и нужно, чтобы динамически поместить из приведенных выше JSON.

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var Menu = React.createClass({ 

render: function() { 
    return (

     <div className="container"> 
      <br/> 
      <div className="panel panel-primary"> 
       <div className="panel-heading">Sample Dynamic Form using json data</div> 
        <div className="panel-body"> 
          <form className="form-horizontal"> 
           <div className="form-group"> 
            <label for="firstname" className="col-sm-2 control-label">First Name</label> 
             <div className="col-sm-8"> 
              <input type="text" className="form-control" id="firstname" placeholder=""/> 
             </div> 
           </div> 
           <div className="form-group"> 
            <label for="lastname" className="col-sm-2 control-label">Last Name</label> 
             <div className="col-sm-8"> 
              <input type="text" className="form-control" id="lastname" placeholder=""/> 
             </div> 
           </div> 
           <div className="form-group"> 
            <label for="address" className="col-sm-2 control-label">Address</label> 
             <div className="col-sm-8"> 
              <textarea type="text" className="form-control" id="address" placeholder=""/> 
             </div> 
           </div> 

           <div className="col-md-10 text-right"> 
            <button type="button" className="btn btn-primary">Submit</button> 
           </div> 

          </form> 


        </div>  
      </div> 
     </div> 
    ) 
} 

}); 
module.exports = Menu 

Я новичок, чтобы так реагировать. Может ли кто-нибудь помочь мне, как это сделать в реакциях?

Answer 1

После того, как у вас есть данные в формате JSON, вы можете map над ним и создать макет динамически, что-то вроде этого:

// You can `require` a local file or `fetch` it from somewhere 
 
// For the demo purpose, I just included it here. 
 
const JSON = [ 
 
    { 
 
     "indexId":"1", 
 
     "abrvIndexName":"firstname", 
 
     "indexDesc":"First Name", 
 
     "htmlControlType":"textbox", 
 
     "cssClassName":"form-control" 
 
    }, 
 
    { 
 
     "indexId":"2", 
 
     "abrvIndexName":"lastname", 
 
     "indexDesc":"Last Name", 
 
     "htmlControlType":"textbox", 
 
     "cssClassName":"form-control" 
 
    }, 
 
    { 
 
     "indexId":"3", 
 
     "abrvIndexName":"address", 
 
     "indexDesc":"Address", 
 
     "htmlControlType":"textarea", 
 
     "cssClassName":"form-control" 
 
}]; 
 

 
var Menu = React.createClass({ 
 

 
    renderFormGroups: function() { 
 
     // Assume your data is fetched/available 
 
     const data = JSON; 
 

 
     // Here we build the form's groups elements dynamically 
 
     return data.map(group => { 
 
      return <div className="form-group"> 
 

 
       <label for={group.abrvIndexName} 
 
         className={"col-sm-2 " + group.cssClassName}> 
 
        {group.indexDesc} 
 
       </label> 
 

 
       <div className="col-sm-8"> 
 
         <input type="text" 
 
          className="form-control" 
 
          id={group.abrvIndexName} 
 
          placeholder="" /> 
 
        </div> 
 

 
      </div> 
 
     }); 
 
    }, 
 

 
    render: function() { 
 
     return (
 
      <div className="container"> 
 
       <div className="panel panel-primary"> 
 
        <div className="panel-heading">Sample Dynamic Form using json data</div> 
 
        <div className="panel-body"> 
 
         <form className="form-horizontal"> 
 
          {this.renderFormGroups()} 
 
         </form> 
 
        </div>  
 
       </div> 
 
      </div> 
 
     ) 
 
    } 
 
}); 
 

 
ReactDOM.render(<Menu />, 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"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>