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,
}