Question

React初学者在调试此代码时遇到问题

有人可以告诉我这段代码有什么问题吗？如果您可以提供解决问题的方法，那将非常有帮助我要在这里完成的工作是，当您单击主要选项时，它将在下面显示一个特定的任务列表，当您单击secodrary时，在第二个菜单中单击将呈现一个特定的任务集，您将看到在侧边栏组件下定义的Todo状态。所以基本上，SideBarCatelog下的每个组都会呈现一组不同的任务

此组件引用所有任务的列表

class SideBarList extends React.Component{
    Remove(e){
       this.props.onDelete(e);
    }

        render() {

        var createItem = function(itemText,i) {

            return (
                <SideBarListItem key={i} value={i}  onRemove = {this.Remove}>{itemText}</SideBarListItem>
            );
        };
        var allitems = this.props.items;
        // Here is the filter function 
        var status = this.props.filter[0].Status;
        switch (status){
            case 'false':
             allitems = allitems.filter(t => !t.isDone)
             break;
             case 'true':
             allitems = allitems.filter(t => t.isDone)
        };
        // Here is the search function 
        var queryText = this.props.filter[0].keyword;

        if(queryText){
            var queryResult=[];
            allitems.forEach(function(item){
                if(item.item.toLowerCase().indexOf(queryText)!=-1)
                queryResult.push(item);
            });
            return <ul onDragOver={this.DragOver}>{queryResult.map(createItem,this)}</ul>;
        }

        return <ul onDragOver={this.DragOver}>{allitems.map(createItem,this)}</ul>;
    }
};

此组件引用SideBarList组件下的每个特定任务

class SideBarListItem extends React.Component{
    ChangeHandler(e){
        this.setState({
          value: e.target.checked
        });
        this.props.children.isDone = e.target.checked;
    }
    RemoveHandler(){
       this.props.onRemove(this.props.value);
    }
    DragEndHandler(e){
            this.props.onDragEnd(e);
        }
    DragStartHandler(e){
            this.props.onDragStart(e);
    }
    render(){

        var _style = "line-through";
        if(!this.props.children.isDone)
        _style ="none";
        return (
          <li data-id={this.props.value} 
                    key={this.props.value} draggable="true" onDragEnd={this.DragEndHandler}
                onDragStart={this.DragStartHandler}><button type="button" className="close pull-right" aria-hidden="true" onClick={this.RemoveHandler}>&times;</button><input type="checkbox" onChange={this.ChangeHandler} defaultChecked={this.props.children.isDone} /><span style={{"textDecoration": _style}}>{this.props.children.item}</span></li>
        );
    }
};

此组件是指第一个输入字段下方，朝向右侧的待办事项＃1（SideBarListItem组件）上方的第二个输入字段

class SideBarForm extends React.Component{
    getInitialState() {
        return {item: ''};
    }
    handleSubmit(e){
        e.preventDefault();
        this.props.onFormSubmit(this.state.item);
        this.setState({item: ''});
        //ReactDOM.findDOMNode(this.refs.item).focus();
        return;
    }
    onChange(e){
        this.setState({
          item: e.target.value
        });
    }
    render(){
        return (
            <div className="row">
              <form  onSubmit={this.handleSubmit}>
                <div className="form-group col-sm-10">
                    <input type='text' className="todoField form-control"  ref='item' onChange={this.onChange} value={this.state.item}/>
                    <input type='submit' className="btn btn-default" style={{"float":"left","marginLeft":"5px"}} value='Add'/>
                </div>
              </form>
            </div>
        );
    }
};

此组件指的是主要和次要区域左上方的输入字段

class SideBarCatalogForm extends React.Component{
    getInitialState() {
        return {item: ''};
    }
    handleSubmit(e){
        e.preventDefault();
        this.props.onFormSubmit(this.state.item);
        this.setState({item: ''});
        //ReactDOM.findDOMNode(this.refs.item).focus();
        return;
    }
    onChange(e){
        this.setState({
          item: e.target.value
        });
    }
    render(){
        return (
            <div className="row">
              <form  onSubmit={this.handleSubmit}>
                <div className="form-group ">
                    <input type='text' className="newTodoCatalogField form-control"  ref='item' onChange={this.onChange} value={this.state.item}/>
                    <input type='submit' className="btn btn-default" style={{"float":"left","marginLeft":"5px"}} value='Add'/>
                </div>
              </form>
              </div>

        );
    }
};

此组件引用在输入字段（SideBarCatalogForm）下由主要和次要组成的列表项

class SideBarCatelog extends React.Component {

    changeTodo(e){
        this.props.onSelected( e.currentTarget.dataset.id);
    }
    checkActive(i){

        if (i == this.props.selectedID)
        {
            return "list-group-item active";
        }
        else
        {
            return "list-group-item ";
        }
    }
    render(){   

        var selectedID = this.props.selectedID;
        var allitems =this.props.Todos;

        return <div className="list-group">
        {
            allitems.map(function(item,i){ 
            var _class = "";
            if (i == selectedID)
        {
            _class =  "list-group-item active";
        }
        else
        {
            _class =  "list-group-item ";
        }
            return(
                 <a href="#" key={i} data-id={i} className={_class} onClick={this.changeTodo} ><span className="badge" >{item.items.length}</span>{item.name}</a>
            )
        },this)}</div>;
    }
};

这是所有其他组件都被称为的主要组件

class Sidebar extends React.Component{
    getInitialState(){
        return {Todo:[{name:"primary",items:[{item:'Todo itme #1',isDone:false},{item:'Todo itme #2',isDone:true},{item:'aaaa',isDone:true},{item:'dddd',isDone:true}
        ]},{name:"Secondary",items:[{item:'Todo itme #1',isDone:false},{item:'Todo itme #2',isDone:true},{item:'Todo itme #3',isDone:true}
        ]}],filter:[{keyword:'',Status:"SHOW_ALL"}],selectedCatelog:"0"};
    }
    updateItems(newItem){

        var item = {item:newItem,isDone:false};

        var newtodo = this.state.Todo;
        if(this.state.selectedCatelog != null){
        var allItems = this.state.Todo[this.state.selectedCatelog].items.concat([item]);
        newtodo[this.state.selectedCatelog].items = allItems;
        this.setState({
            Todo: newtodo
        });
        }
    }
    deleteItem(index){
        var newtodo = this.state.Todo;
        if(this.state.selectedCatelog != null){
        var allItems = this.state.Todo[this.state.selectedCatelog].items.slice(); //copy array
        allItems.splice(index, 1); //remove element
        newtodo[this.state.selectedCatelog].items = allItems;
        this.setState({
            Todo: newtodo
        });
    }
    console.log(this.state.selectedCatelog)
    }

    AddCatalog(newCatalog){
        var Catalog = {name:newCatalog,items:[{item:'Todo itmd #1',isDone:false}]};
        var newtodo = this.state.Todo.concat([Catalog]);
        this.setState({
            Todo: newtodo
        });
    }
    setSelectedCatalog(index){
        if(this.state.selectedCatelog != null){
        this.state.selectedCatelog = index;
        this.setState({
            selectedCatelog: index
        });
        console.log(this.state.selectedCatelog)
    }
    }
    render(){
        return (
            <div className="row">
                <div className="col-xs-3">
                    <SideBarCatalogForm onFormSubmit = {this.AddCatalog} />
                    <SideBarCatelog selectedID = {this.state.selectedCatelog} onSelected={this.setSelectedCatalog} Todos = {this.state.Todo} />
                </div>
                <div className="col-xs-6">
                    <SideBarForm onFormSubmit = {this.updateItems} />
                    <SideBarList  items = {this.state.Todo[this.state.selectedCatelog].items}/>
                </div>
            </div>
</>
        );
    }
}
};

export default Sidebar

在进行分组调试时遇到问题

0 个答案: