import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Form extends Component {
constructor(props) {
super(props)
this.initialState = {
nombre: '',
nota: '',
}
this.state = this.initialState;
}
cambio = event => {
const {name, value} = event.target;
console.log(name + "|" + value);
this.setState({
[name]: value
})
}
enviar = () => {
this.props.mas(this.state.nombre, this.state.nota);
this.setState(this.initialState);
}
render() {
return (
<form>
<label>Nombre</label>
<input type="text" name="nombre" value={this.state.nombre} onChange={this.cambio} />
<label>Nota</label>
<input type="text" name="nota" value={this.state.nota} onChange={this.cambio} />
<input type="button" onClick={this.enviar} value="Añadir"/>
</form>
);
}
}
class Cabecera extends Component {
render() {
return (
<tr><th>Alumno</th><th>Nota</th></tr>
);
}
}
;
class Fila extends Component {
eliminar=(e)=>{
e.stopPropagation();
this.props.menos(this.props.indice);
}
render() {
return (
<tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}>
<td>{this.props.nombre}</td><td>{this.props.nota}</td>
<td><input type="button" value="Borrar" onClick={this.eliminar}/></td>
</tr>
);
}
}
;
class Tabla extends Component {
constructor(props) {
super(props);
this.state = {
alumnos: this.props.alumnos,
cont: 0
};
this.mas = this.mas.bind(this);
}
mas(nombre, nota) {
this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]});
}
menos = (index) => {
this.setState({
alumnos: this.state.alumnos.filter((alumno, i) => i != index)
});
}
render() {
const filas = this.state.alumnos.map((fila, index) => {
return (<Fila key={index} indice={index} nombre={fila.nombre} nota={fila.nota} menos={this.menos} mas={this.mas}/>);
}
);
return (
<div>
<Form mas={this.mas}/>
<button onClick={() => this.mas("Ana", 6)}>Añadir</button> <button onClick={() => this.menos(0)}>Quitar</button>
<table>
<thead>
<Cabecera/></thead>
<tbody>
{filas}
</tbody>
</table>
</div>
);
}
}
;
class App extends Component
{
render() {
const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}, {nombre: "Eva", nota: 8}, {nombre: "Ot", nota: 7}];
return (
<Tabla alumnos={alumnos}/>
);
}
}
;
export default App;
Quitar elementos
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Cabecera extends Component {
render() {
return (
<tr><th>Alumno</th><th>Nota</th></tr>
);
}
}
;
class Fila extends Component {
render() {
return (
<tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}>
<td>{this.props.nombre}</td><td>{this.props.nota}</td>
</tr>
);
}
}
;
class Tabla extends Component {
constructor(props) {
super(props);
this.state = {
alumnos: this.props.alumnos,
cont: 0
};
this.mas = this.mas.bind(this);
}
mas(nombre, nota) {
this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]});
}
menos=(index)=>{
this.setState({
alumnos:this.state.alumnos.filter((alumno,i)=>i!=index)
});
}
render() {
const filas = this.state.alumnos.map((fila, index) => {
return (<Fila key={index} nombre={fila.nombre} nota={fila.nota} mas={this.mas}/>);
}
);
return (
<div>
<button onClick={() => this.mas("Ana", 6)}>Añadir</button> <button onClick={() => this.menos(0)}>Quitar</button>
<table>
<thead>
<Cabecera/></thead>
<tbody>
[ {filas}
</tbody>
</table>
</div>
);
}
}
;
class App extends Component
{
render() {
const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}, {nombre: "Eva", nota: 8}, {nombre: "Ot", nota: 7}];
return (
<Tabla alumnos={alumnos}/>
);
}
}
;
export default App;
Pasar funciones a componentes hijos
Un ejemplo:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Cabecera extends Component {
render() {
return (
<tr><th>Alumno</th><th>Nota</th></tr>
);
}
}
;
class Fila extends Component {
render() {
return (
<tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}>
<td>{this.props.nombre}</td><td>{this.props.nota}</td>
</tr>
);
}
}
;
class Tabla extends Component {
constructor(props) {
super(props);
this.state = {
alumnos: this.props.alumnos,
cont: 0
};
this.mas = this.mas.bind(this);
}
mas(nombre, nota) {
this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]});
}
render() {
const filas = this.state.alumnos.map((fila, index) => {
return (<Fila key={index} nombre={fila.nombre} nota={fila.nota} mas={this.mas}/>);
}
);
return (
<div>
<button onClick={() => this.mas("Ana", 6)}>Añadir</button>
<table>
<thead>
<Cabecera/></thead>
<tbody>
{filas}
</tbody>
</table>
</div>
);
}
}
;
class App extends Component
{
render() {
const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}];
return (
<Tabla alumnos={alumnos}/>
);
}
}
;
export default App;
Ver círculo (II)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Circulo extends React.Component {
render() {
var circuloStyle = {
padding: 10,
margin: 20,
display: "inline-block",
backgroundColor: this.props.bgColor,
borderRadius: "50%",
width: 100,
height: 100,
};
return (
<div style={circuloStyle}>
</div>
);
}
}
function verCirculo(num) {
let colores = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#FF2178","#e5d8bf","#00818a","#f54291","#ff0000"];
let circulos = [];
for (let i = 0; i < num; i++) {
let ran = Math.floor(Math.random() * colores.length);
circulos.push(<Circulo key={i} bgColor={colores[ran]} />);
}
return circulos;
}
class VerCirculo extends React.Component {
render() {
return verCirculo(this.props.num);
}
}
class App extends Component
{
constructor(props){
super(props);
this.state={cont:0};
}
foo=()=>{
this.setState({cont:this.state.cont+1});
}
render() {
return (
<div onClick={this.foo}>
<VerCirculo num="3"/>
{verCirculo(this.state.cont)}
</div>
);
}
}
export default App;
Ver Círculo (I)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Circulo extends React.Component {
render() {
var circuloStyle = {
padding: 10,
margin: 20,
display: "inline-block",
backgroundColor: this.props.bgColor,
borderRadius: "50%",
width: 100,
height: 100
};
return (
<div style={circuloStyle}>
</div>
);
}
}
function verCirculo() {
let colores = ["#393E41", "#E94F37", "#1C89BF", "#A1D363"];
let ran = Math.floor(Math.random() * colores.length);
return <Circulo bgColor={colores[ran]} />;
}
class App extends Component
{
render() {
return (
<div>
{verCirculo()}{verCirculo()}{verCirculo()}
</div>
);
}
}
export default App;
Diferencias entre usar funciones con bind o arrow functions
Librerías JS para juegos
Ejemplo estado Tabla
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Cabecera extends Component {
render() {
return (
<tr><th>Alumno</th><th>Nota</th></tr>
);
}
}
;
class Fila extends Component {
render() {
return (
<tr ><td>{this.props.nombre}</td><td>{this.props.nota}</td></tr>
);
}
}
;
class Tabla extends Component {
constructor(props) {
super(props);
this.state = {
alumnos: this.props.alumnos,
cont: 0
};
//this.mas = this.mas.bind(this);
}
mas=()=> {
this.setState({alumnos: [...this.state.alumnos, {nombre: "Ana", nota: 6}]});
}
render() {
const filas = this.state.alumnos.map((fila, index) => {
return (<Fila key={index} nombre={fila.nombre} nota={fila.nota}/>);
}
);
return (
<div>
<button onClick={this.mas}>Añadir</button>
<table>
<thead>
<Cabecera/></thead>
<tbody>
{filas}
</tbody>
</table>
</div>
);
}
}
;
class App extends Component
{
render() {
const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}];
return (
<Tabla alumnos={alumnos}/>
);
}
};
export default App;
Enlaces React
Snack overflow
