react-form-beta v1.0.5

React Form Component

npm

  npm i react-form-beta

Links

GitHub NPM

Demo

Demo

Use direction Object

  [
    {
      "type"        : "text",                   // html input type  ex: text / password / number / mail / radio / textarea / select / date / multiple / file
      "name"        : "username",               // html input name , only name
      "value"       : "sun",                    // html input value , init value null ; When type is equal to multiple is Object
      "data"        : [],                       // type select / multiple / radio , option's data 
      "label"       : "Username",               // html input label , no label input width 100%
      "placeholder" : "please input your name", // html input placeholder , init null
      "required"    : {
        "switch"       : false / true,
        "msg"          : ""
      },                    // html input required "trun / false",
      "showTime"    : false,                    // for type date , time show / hide
      "children"    : []                        // only type select 
    },
    { ... },
    {
      "type"        : "select",                 // html input type  ex: text / password / number / mail / radio / textarea / select / date / multiple / file
      "name"        : "like",                   // html input name , only name
      "value"       : [
        {
          "value"     : "1",
          "name"      : "selected name"
        },
        {...},
        {
          "value"     : "n",
          "name"      : "selected name"
        }
      ],                    // html input value , init value null ; When type is equal to multiple is Object
      "data"        : [
        {
          "value"     : "1",
          "name"      : "option name"
        },
        {...},
        {
          "value"     : "n",
          "name"      : "option name"
        }
      ],                       // type select / multiple / radio , option's data 
      "label"       : "Username",               // html input label , no label input width 100%
      "placeholder" : "please input your name", // html input placeholder , init null
      "required"    : {
        "switch"       : false / true,
        "msg"          : ""
      },                    // html input required "trun / false",
      "showTime"    : false,                    // for type date , time show / hide
      "children"    : []                        // only type select 
    }
  ]

Api key children

  children : [
    {
      "key"         : "",                       // correspond type:select selected value 
      "type"        : "text",                   // html input type Ex: text / password / number / mail / radio / textarea / select / date / multiple
      "name"        : "username",               // html input name , only name
      "value"       : "sun",                    // html input value , init value null ; When type is equal to multiple is Object
      "data"        : [],                       // type select / multiple / radio , option's data 
      "label"       : "Username",               // html input label , no label input width 100%
      "placeholder" : "please input your name", // html input placeholder , init null
      "required"    : {
        "switch"       : false / true,
        "msg"          : ""
      },                    // html input required "trun / false"
      "showTime"    : false                     // for type date , time show / hide
    }
  ]

Use direction component

  import Form from react-form-beta;

  testMultipleSearch( string ){
    console.log( string );
  }

  testResult( object ){
    console.log( object );
  }

  testCancel(){
    //cancel function action
  }

  <Form
    data             = { this.state.form }                     // form object setup data
    multipleSearch   = { this.testMultipleSearch.bind(this) }  // multiple return search value call ajax
    result           = { this.testResult.bind(this) }          // form result
    cancel           = { this.testCancel.bind(this) }          // from cancel 
  />

Use direction Object Api