Ejemplo List y Form

Input.js

/*No fijarse mucho en este archivo es horrible :c */
import React, { PropTypes } from "react";

export default class Input extends React.Component{
  constructor(props) {
    super(props);
    this.state = { focused: false };
    this.handler = this.handler.bind(this);
    this.onChange = this.onChange.bind(this);
    this.clear = this.clear.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.onFocus = this.onFocus.bind(this);
  }
  getValue(){
    var pluck = "value";
    if(this.props.type === "checkbox") pluck = "checked";
    var value = this._input.getDOMNode()[pluck];
    var {name, index} = this.props;
    return {value: value, name: name, index: index};
  }
  setValue(val){
    var pluck = "value";
    if(this.props.type === "checkbox") pluck = "checked";
    return this._input.getDOMNode()[pluck] = val;
  }
  isFocus(){
    return this.state.focused;
  }
  handler(){
    var pluck = "value";
    if(this.props.type === "checkbox") pluck = "checked";
    var value = this._input.getDOMNode()[pluck];
    var { handler, name, index} = this.props;
    if(this.props.handler) handler(value, name, index);
  }
  onChange(){
    this.handler();
  }
  clear(){
    this._input.getDOMNode().value = "";
    this.handler()
  }
  onBlur(){
    this.setState({ focused: false });
  }
  onFocus(){
    this.setState({ focused: true });
  }
  render() {
    return (
      <input {...this.props} ref={(c) => this._input = c}
      onChange={this.onChange} onBlur={this.onBlur} onFocus={this.onFocus} />
    );
  }
}

List.js

import React, { PropTypes } from "react";
import Input from "./Input";
export default class List extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      rows: [
      	
      	{stock: 1231434123, lot: "asdasdasd", item: { name: "ITEM 1", serialized: false}},
      	{stock: 1231434143, lot: "asdasdasd", item: { name: "ITEM 2", serialized: false}},
      	{stock: 1231434133, lot: "asdasdasd", item: { name: "ITEM 3", serialized: true}},
      	{stock: 1231432123, lot: "asdasdasd", item: { name: "ITEM 4", serialized: false}},
      	
      ],
    }
    this.getValue = this.getValue.bind(this);
    this.extHandler = this.extHandler.bind(this);
    this.handler = this.handler.bind(this); 
  }
  getValue(){
    var value = this.state.rows
    var {name, index} = this.props;
    return {value: value, name: name, index: index};
  }
  extHandler(){
    if(this.props.handler) this.props.handler(this.getValue());
  }
  handler(e,name,i){
    var rows = this.state.rows;
    rows[i][name] = e;
    this.setState({rows: rows});
    this.extHandler();
  }
  render() {
    var {rows} = this.state;
    console.log(rows)
    return (
      
        <table>
          <thead>
            <tr>
              <th>Nombre</th>
            </tr>
          </thead>
          <tbody>
            {
              this.state.rows.map((row, i)=>{
                return (
                  <tr key={i} >
                    <td>{row.item.name}</td>
                    <td><Input name="lot" defaultValue={row.lot} handler={this.handler} index={i} button={false} readOnly={this.props.readOnly} /></td>
                    <td><Input name="stock" defaultValue={row.stock} handler={this.handler} index={i} button={false} readOnly={this.props.readOnly} /></td>
                  </tr>
                )
              })
            }
          </tbody>  
        </table>
    );
  }
}

PurchaseForm.js

import React, { PropTypes } from "react";
import List from "./List";
import Input from "./Input";
export default class PurchasesForm extends React.Component{
  constructor() {
    super();
    this.state = { result: "" };
    this.save = this.save.bind(this);
  }
  save(){
    var rows = this._list.getValue().value.map((row) => { row.item.name = "daasdsd"; return row });
    var purchase = {
      invoice: this._invoice.getValue().value,
      items: rows,
    };
    if(!purchase.invoice) return this.setState({result: "Introduzca numero de factura valido"});
    if(!purchase.items.length) return this.setState({result: "Introduzca numero de factura valido"});
  }
  render(){
    return(
    <div>
      <Input ref={(r) => this._invoice = r} id="invoice" className="pure-u-23-24"/>
      <List  ref={(r) => this._list = r} name="list" />
      <button className="pure-button" onClick={this.save}>Guardar</button>
    </div>
    );
  }
}

React.render(<PurchasesForm />, document.body)

extHandler es por si quieres recibir las actualizaciones de los items en cada cambio.