Skip to content

Instantly share code, notes, and snippets.

@calderaro
Last active August 29, 2015 14:27
Show Gist options
  • Save calderaro/3958f15f0c9a6fb20387 to your computer and use it in GitHub Desktop.
Save calderaro/3958f15f0c9a6fb20387 to your computer and use it in GitHub Desktop.
Ejemplo List y Form
/*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} />
);
}
}
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>
);
}
}
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)
@calderaro
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment