Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Lista de itens

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)}>&times;</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>
        )
    }
}
3 respostas

O que eu faria:

var items = this.props.items.map(item => {
            return (
                <ListItem key={item.index} item={item} onExclude={() => this.props.onExclude(item.index-1)} onCheck={this.props.onCheck} />
            );
        })

Como você sabe que nesse momento o index começa de 1, você já passa ele subtraído para a função. Acho melhor manter aí, caso contrário vai gerar um acoplamento desnecessário entre seus componentes.

Não consegui resolver ainda, toda vez que clico no primeiro item da lista, ele remove o ultimo, tanto para o remover item quanto para checar o item da lista. Tenho o projeto no git hub:

https://github.com/wellingtonngallo/todolist-react

solução!

Oi Maria, baixei seu projeto aqui e rodei. Você já resolveu né? Tudo funcionou certinho :).