Estou com um problema, tenho uma lista de itens onde eles podem ser checados para informar que foram finalizados, porém quando eu clico no primeiro item da lista o valor que ele me retorna é 1, mas a posição do array é 0, fazendo com que ele sempre cheque o ultimo item ao inves do clicado. Segue o código
import React, {Component} from 'react';
import Header from './Header';
class ListTodo extends Component{
render(){
var items = this.props.items.map(item => {
return (
<ListItem key={item.index} item={item} onExclude={this.props.onExclude} onCheck={this.props.onCheck} />
);
})
return(
<ul className="list-group">{items}</ul>
)
}
}
class ListItem extends Component{
onCheck(){
var index = this.props.item.index;
this.props.onCheck(index);
}
onExclude(){
var index = this.props.item.index;
this.props.onExclude(index);
}
render(){
var todoClass = this.props.item.check ? "check" : "uncheck";
return(
<li className="list-group-item">
<div className={todoClass}>
<span className="glyphicon glyphicon-ok icon" aria-hidden="true" onClick={this.onCheck.bind(this)}>teste</span>
{(this.props.item.value)}
<button type="button" className="close" onClick={this.onExclude.bind(this)}>×</button>
</div>
</li>
)
}
}
class Form extends Component{
onSubmit(e){
e.preventDefault();
var newItemValue = this.itemList.value;
if(newItemValue){
this.props.onAdd({newItemValue});
}
}
render(){
return(
<form onSubmit={this.onSubmit.bind(this)} className="form-inline">
<input type="text" className="form-control" placeholder="New Item in List" ref={input => this.itemList = input} />
<button type="submit" className="btn btn-primary">Add</button>
</form>
)
}
}
export default class ActionsList extends Component{
constructor(props){
super(props);
this.state = {itemsTodo: []};
}
onAdd(itemList){
this.state.itemsTodo.unshift({
index: this.state.itemsTodo.length, // Pega o tamanho da lista e adiciona mais 1
value: itemList.newItemValue, // Pega o valor que foi inserido no Input
check: false // Passa por padrão o atributo falso para apontar que a tarefa não foi checada
});
this.setState({itemsTodo: this.state.itemsTodo});
}
onExclude(itemList){
this.state.itemsTodo.splice(itemList, 1); // Remove um item da lista na posição passada por parametro
this.setState({itemsTodo: this.state.itemsTodo});
}
onCheck(itemList){
let items = this.state.itemsTodo[itemList];
this.state.itemsTodo.splice(itemList, 1);
items.check =!items.check;
this.state.itemsTodo.push(items);
this.setState({itemsTodo: this.state.itemsTodo});
}
render(){
return(
<div id="main">
<Header />
<Form onAdd={this.onAdd.bind(this)} />
<ListTodo items={this.state.itemsTodo} onExclude={this.onExclude.bind(this)} onCheck={this.onCheck.bind(this)} />
</div>
)
}
}