Construir una interfaz CRUD con React y Ruby on Rails

Es hora de pasar al siguiente archivo que creamos anteriormente;

1234567891011//app/assets/javascripts/componentes/_new_item.js.jsxvarNewItem=React.createClass({render(){return(<div><h1>newitem</h1mph;/div>);});

javascript

¿Qué se necesita para crear un nuevo elemento? Debemos crear dos campos de entrada y enviarlos al servidor a través de una solicitud POST. Cuando se crea el nuevo elemento, tenemos que recargar nuestra lista de elementos para que incluyan el recién creado.

Añadamos los campos del formulario y el botón para manejar el envío.

12345678910111213141516// app/assets/javascripts/componentes/_new_item.js.jsxvarNewItem=React. createClass({render(){return(<div><input ref=$0027nombre$0027 placeholder=$0027Ingresa el nombre del ítem$0027/(;input ref=$0027descripción$0027 placeholder=$0027Ingresa una descripción$0027/(;botón$0027;Submit</botón$0027;</div>))}});

javascript

Todo parece familiar, excepto por el atributo de ref. El atributo ref se utiliza para referirse al elemento en el componente. Su función es similar a la del atributo de nombre en AngularJS. En lugar de encontrar los elementos por id o por clase, lo hacemos por ref. En este caso particular, el ref se utilizará para obtener el valor del campo de texto y enviarlo al servidor.

Si intentaste hacer clic en el botón de envío, te darás cuenta de que no pasa nada. ¡Así que añadamos un manejador de eventos! Para hacer esto, necesitamos alterar ligeramente el html del botón:

1<button onClick={this.handleClick};Submit</button
javascript

Una vez que tengamos esto, cuando hagamos clic en el botón el componente buscará la función handleClick(). Debemos definirla en el archivo JavaScript.

12345678910111213// app/assets/javascripts/componentes/_new_item.js.jsx// var NewItem = ...handleClick(){var name =this.refs.name.value;var description =this.refs.description.value;console.log($0027El valor del nombre es $0027+ nombre +$0027el valor de la descripción es $0027+ descripción);},//render()..
javascript

Esta vez, si pones texto en los campos de entrada y pulsas el botón, se imprimirán los valores de los campos de entrada en la consola de JavaScript. Aquí puedes ver cómo se utiliza el atributo refs para obtener el valor del campo de entrada. En lugar de enviar los valores a la consola, vamos a enviarlos al servidor. Así es como sucederá esto:
12345678910111213141516171819202122232425/// app/assets/javascripts/componentes/_new_item.js.jsxvarNewItem=React.createClass({handleClick(){var nombre =este.refs.nombre. value;var description =this.refs.description.value; $.ajax({ url:"/api/v1/items", type: "POST", data:{ item:{ name: nombre, descripción: descripción }},success:response=§;{console. log("¡funcionó!", response);}},},render(){return(<div><input ref="nombre" placeholder="Introducir el nombre del ítem"/;input ref="descripción" placeholder="Introducir una descripción"/;botón onClick={this.handleClick};Submit</button></div>);}});
javascript

Enviamos una solicitud POST al punto final de la URL de los artículos usando $.ajax . La respuesta contiene un objeto con el nombre y la descripción del artículo. Su llamada imprime la respuesta del servidor en la consola. ¡Pruébalo!

Todo va bien, pero parece haber un problema: tenemos que reiniciar la página para ver el nuevo elemento. ¿Cómo podemos mejorar esto? y no pueden comunicarse entre sí porque están en el mismo nivel. Como sabemos, podemos enviar datos sólo a la parte inferior de la jerarquía de componentes. Esto significa que tenemos que mover el almacenamiento de los elementos del estado a una capa superior; debemos moverlo al componente.

Mueve getInitialState() y componentDidMount() de a . Ahora, los artículos serán recuperados cuando se carguen. Podemos enviar variables a los componentes de los niños con accesorios. Los props son inmutables en el hijo y, para alcanzarlos, necesitamos usar este.props. En nuestro caso, en lugar de usar estos elementos de estado, usaremos estos elementos de utilería.

Así es como enviaremos los artículos desde a..:
123// app/assets/javascripts/componentes/_body.js.jsx<AllItems items={this.state.items}/&;
javascript

Así es como van a ser referidos en..:
123// app/assets/javascripts/componentes/_all_items.js.jsxvar items=this.props.items.map((item)=//pre>
javascript

También podemos pasar funciones como propiedades a la jerarquía de componentes. Hagámoslo con handleSubmit() en . Al igual que la matriz de ítems, también moveremos la función a su componente padre.

123456789// app/assets/javascripts/componentes/_body.js.jsx// getInitialState() y componentDidMount()handleSubmit(item){console.log(item);},// hace que el componente AllItems y NewItem
javascript

Entonces, hagamos referencia a la función en el componente infantil, como hicimos con la matriz:
123// app/assets/javascripts/componentes/_body.js.js<NewItem handleSubmit={this.handleSubmit}/{N->/pre>
javascript

En el componente, pasaremos la función como parte de this.props y pasaremos el objeto de la petición AJAX como argumento del padre:

1234567891011121314/// app/assets/javascripts/componentes/_new_item.js.jsxhandleClick(){var nombre =esto.refs.nombre.valor;var descripción =esto.refs.descripción. value; $.ajax({ url:$0027/api/v1/items$0027, type:$0027POST$0027, data:{ item:{ nombre: nombre, descripción: descripción }},success:(item)={this.props.handleSubmit(item);}};}
javascript

Ahora, cuando haga clic en el botón de envío, la consola de JavaScript registrará el objeto que acabamos de crear. ¡Impresionante! Ya casi llegamos. Sólo tenemos que añadir el nuevo elemento a la matriz de elementos en lugar de registrarlo en la consola.
12345678910// app/assets/javascripts/componentes/_body.js.jsx// getInitialState() y componentDidMount()handleSubmit(item){var newState =this.state.items.concat(item);this.setState({ items: newState })},// hace que el componente AllItems y NewItem
javascript

Ahora todo debería funcionar bien. Ya que se movió mucho código en este paso, aquí están los archivos actualizados, para que puedas comprobar si has seguido correctamente:
12345678910111213141516/// app/assets/javascripts/componentes/_all_items.js.jsxvarAllItems=React.createClass({render(){var items =this.props.items. map(item={[item={return(<div key={item.id};};h3;{nombre.del.elemento}</h3;};p;};{descripción.del.elemento}</p;};});return<div{{{[item]}</div;}});
javascript
123456789101112131415161718192021222324252627/// app/assets/javascripts/components/_body.js.jsxvarBody=React.createClass({getInitialState(){return{ items:[]};},componentDidMount(){ $.getJSON("/api/v1/items.json",response= >{this. setState({ items: response });})},handleSubmit(item){var newState =this.state.items.concat(item);this. setState({ items: newState });},render(){return(<div><NewItem handleSubmit={this.handleSubmit}/{[};};
 AllItems items={this.state.items}/[</div>);}});

javascript
12345678910111213141516171819202122232425/// app/assets/javascripts/componentes/_new_item.js.jsxvarNewItem=React.createClass({handleClick(){var name =this.refs. name.value;var description =this.refs.description.value; $.ajax({ url:"/api/v1/items", type: "POST", data:{ item:{ name: name, description: description }},success:item= >{this. props.handleSubmit(item);}});},render(){return(<div><input ref="nombre" placeholder="Ingresar el nombre del ítem"/;input ref="descripción" placeholder="Ingresar una descripción"/;botón onClick={this.handleClick};Submit</button></div>);}});
javascript