react-forms

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-forms example</title>
  <script src="http://fb.me/react-with-addons-0.10.0.min.js"></script>
  <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
  <script src="/application/html/js/prometheusresearch/react-forms/react-forms.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
/** @jsx React.DOM */
(function() {
  ‘use strict’;
  var cloneWithProps   = React.addons.cloneWithProps;
  var Form             = ReactForms.Form;
  var List             = ReactForms.schema.List;
  var Property         = ReactForms.schema.Property;
  var ArrayEditor = React.createClass({
    mixins: [ReactForms.RepeatingFieldsetMixin],
    onFocus: function(idx, e) {
      if (this.valueLens().val().length – 1 === idx) {
        this.add();
      }
    },
    onRemoveItem: function(idx) {
      if (idx === 0 && this.valueLens().val().length === 1) {
        this.updateValue([null]);
      } else {
        this.remove(idx);
      }
    },
    decorate: function(item) {
      item = React.addons.cloneWithProps(
        item,
        {onFocus: this.onFocus.bind(null, item.props.name), className:’form-control’}
      );
      return (
        <div key={item.props.name} className="input-group">
          {item}
          <span className="input-group-btn">
          <button
            onClick={this.onRemoveItem.bind(null, item.props.name)}
            tabIndex="-1"
            type="button"
            className="btn btn-danger">
            X
          </button>
            </span>
        </div>
      );
    },
    render: function() {
      var fields = this.renderFields().map(this.decorate);
      return this.transferPropsTo(<div className="ArrayEditor">{fields}</div>);
    }
  });
  var Values = (
    <List component={ArrayEditor}>
      <Property />
    </List>
  );
  React.renderComponent(
    <Form schema={Values} value={[‘focus on me!’]} />,
    document.getElementById(‘example’)
  );
})();
</script>
</body>
</html>

CDN