0

Espero que esten bien.

Necesito un poco de ayuda en react, soy relativamente nuevo en react. El problema es el siguiente.

Tengo una card hecha con materialize y en el contenido tengo 4 checkbox. Quiero que cuando se marque un checkbox se vaya sumando a una cantidad numerica de un objeto que tengo, en este caso un carro.

Aqui el codigo de mi componente.

import React ,{Component} from 'react';

class CheckBox extends Component{
    constructor(props){
        super(props);

        this.state={
            Puertas:'',
            Neon:'',
            Ventanas:'',
            Neumaticos:'',
        }
        this.handleCheckBox = this.handleCheckBox.bind(this);
    }

    handleCheckBox(e){
        if(e === true){
            console.log('true');
        }else{
            console.log('false')
        }
    }

    render(){
        return(
        <div className="container">
            <p>
                <label>
                    <input type="checkbox" onChange={(e)=>this.handleCheckBox(e.target.value) } />
                    <span>Puertas</span>
                </label>
            </p>
            <p>
                <label>
                    <input type="checkbox" />
                    <span>Ventanas</span>
                </label>
            </p>
            <p>
                <label>
                    <input type="checkbox" />
                    <span>Neon</span>
                </label>
            </p>
            <p>
                <label>
                    <input type="checkbox" />
                    <span>Neumaticos</span>
                </label>
            </p>
        </div>
        )
    }
  }

export default CheckBox

Aqui estoy intentado que me imprima en la consola cuando este activo o no.

1 respuesta 1

1

Podrias tratar colocandole un nombre a tus checkboxes relativo al de tu objeto, algo asi como:

<input type="checkbox" name="Puertas" onChange={this.handleCheckBox} />

Luego en el handler podrias solo hacer algo como esto:

handleCheckBox = e => { //asi no tienes que hacer bind en el constructor
    if(e.target.value === true){
     let name = e.target.name
     let carPart = this.state[name]
     this.setState({[name]: carPart + 1})
        console.log('true');
    }else{
        console.log('false')
    }
}

No lo he probado, pero esto deberia darte una idea de como solucionarlo, espero haberte ayudado.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.