0

Estou implementando algumas checkbox com React, eu consigo settar para inicialmente estar marcada ou não, mas não consigo mudar esse estado.

Como resolver?

Minha Classe PrincipaL

class NewsletterConfig extends Component {
constructor(props) {
    super(props)
    this.state = {
        promocoes: true,
    }

    this.handleClick = this.handleClick.bind(this)
}

handleClick({ target }) {
    this.setState({
        [target.name]: !target.checked,
    })
}

render() {
    return (
        <div>
            <Componente01
                name="promocoes"
                title="Tab"
                checked={this.state.promocoes}
                handleClick={this.handleClick}
            />

O Componente01

const NewsletterCalling = ({
title,
name,
checked,
 }) => (
<div>
    <label htmlFor={name}>{title}</label>
    <Checkbox name={name} checked={checked} />
</div>
)

NewsletterCalling.propTypes = {
title: string.isRequired,
name: string.isRequired,
checked: bool.isRequired,
handleClick: func.isRequired,
}

E a Checkbox

const Checkbox = ({ name, checked, handleClick }) => (
<div>
    <input
        id={name}
        name={name}
        checked={checked}
        type="checkbox"
        onClick={handleClick}
    />
    <span />
</div>
)

Checkbox.propTypes = {
    name: string.isRequired,
    checked: bool.isRequired,
    handleClick: func.isRequired,
}

1 Resposta 1

0

No método handleClick, você não precisa inverter o valor de target.checked pois este valor já vem com o valor certo ("invertido") ao clicar no checkbox. Assim, você precisa apenas remover o sinal de exclamação "!":

handleClick({ target }) {
    this.setState({
        [target.name]: target.checked,
    })
}

Você pode verificar isso dando um log no valor (console.log(target.checked)) antes de chamar o método setState.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .