I'm having a problem and have tried several ways to solve it ... I need to get the value of the child element and pass it to the parent. Within this form, I have these plus and minus buttons (if there is no shorter than this, it puts an X).
OnthisscreenIwantedtodothefollowing,whentheuserclickedontheseplusorminusbuttons,Iwantedtogetthevalueofitandmoveontotheparentelement.ButI'mnotgettinganysuccess.
ParentElement
constructor(props){super(props);this.handleClick=this.handleClick.bind(this);}handleClick(number){console.log("NUMERO " + number);
}
<ul>
{
Object.keys(areas[item].childs).map(function(itemchild, ichild){
return <li key={ ichild }>{ areas[item].childs[itemchild].description } <InputCounter handleClick={(number) => this.handleClick(number)} { ...areas[item].childs[itemchild] }/></li>
})
}
</ul>
Son Element
increment = () => {
if(this.state.count < this.state.max_score){
this.setState({
count: this.state.count + 1
});
//Tentei passar o novo valor
this.props.handleClick(this.state.count);
}
}
render() {
return (
<span className="input_spinner">
<button onClick={ this.decrement } className={'minus ${ this.state.count === 0 ? "_disabled" : ""}'}></button>
<input type="text" placeholder={ this.state.count } disabled/>
<button onClick={ this.increment } className={'plus ${ this.state.count === this.state.max_score ? "_disabled" : "" }'}></button>
</span>
);
}
In these snippets I tried to get the value when the user increments and plays to the parent function to give the console.log in it, but I do not receive anything.