react template

by dkunin

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/**
* @jsx React.DOM
*/

var SimpleForm = React.createClass({
removeMe: function(){
    this.props.removeItem(this.props.index)
},
render: function(){
    return <div onClick={this.removeMe}>{this.props.name} {this.props.value}</div>

}})


var Form = React.createClass({
getInitialState: function(){
return {
inputs:["a","b","c"]
}
},
addItem: function(){
var arr = this.state.inputs;
arr.push(arr.length)
this.setState({inputs:arr})
},
removeItem: function(ind){
var arr = this.state.inputs;
arr.splice(ind,1)
this.setState({inputs:arr})
},
  render: function() {
  var list = this.state.inputs.map(function(m,i){
        return <SimpleForm removeItem={this.removeItem} index={i} key={'input'+i} name={"name"+i} value={m}/>  
    }.bind(this))
    return (
      <div>
          <ul>
        {list}
        </ul>
<button onClick={this.addItem}>+</button>        
      </div>
    );
  },
});

React.renderComponent(<Form/>, document.body);

var CalculateCompensation = React.createClass({
  getDefaultProps: function(){
    return {
    }
  },
  getInitialState: function() {
    return {
   additionalCompensations: []
    };
  },
  addField: function() {
 var fields = this.state.additionalCompensations,
  i = fields.length,
  name = "compensationSumm" + i;
 var newField = (
  <div key={'field' + name}>
   <SimpleForm name={name}></SimpleForm>
   <a onClick={this.deleteFieldLink.bind(this, i)}>Убрать поле</a>
  </div>
 );
 this.setState(
  {additionalCompensations: fields.concat([newField])}
 );
  },
  deleteFieldLink: function ( a ) {
 var fields = this.state.additionalCompensations;
 //var i = fields.indexOf(a);

 fields.splice(a, 1);
 this.setState({additionalCompensations:fields})
  },
  render: function(){
 if (this.state.additionalCompensations.length < 3) 
  var addFieldElement = (<a onClick={this.addField}>Добавить поле для ввода суммы</a>);
    return (
  <div ref="form">
   <form action="" method="GET">
    {this.state.additionalCompensations}
    {addFieldElement}
  ...