Question

当我尝试删除待办事项列表时出现问题，onDelete不是函数。在git中，全部代码为here。谢谢

var TodoList = React.createClass({
    onDelete : function(key){
        console.log('remove here');
    },
    render: function() {
        var createItem = function(itemText,i) {
            return (
                <TodoListItem onDelete={this.remove} index={i} key=
                    {i}>{itemText}
                </TodoListItem>
            );
        };

        return(
            <ul id="staggered-test" className="collection with-
            header">
                <li className="collection-header">
                    <h4>todo list</h4>
                    {this.props.items.map(createItem)}
                </li>
            </ul>
      )
   }
});




var TodoListItem = React.createClass({
    remove : function(key){
        console.log('test:',key);
        console.log('that.props',this);
        this.props.onDelete();
    },
    render : function(){
        return(
            <li className="collection-item">
                <div>{this.props.children}
                    <a onClick=
                    {this.remove.bind(this,this.props.index)} href="#" className="secondary-content"><i className="material-icons">delete</i>
                    </a>
                </div>
            </li>
        )
    }
});

Answer 1

问题来自

行

onDelete={this.remove}

未定义此删除功能。你有什么需要在onDelete做的吗？如果没有，您可以删除this.props.onDelete();

Answer 2

问题来自这一行

onDelete = {this.remove}

更改为

onDelete = {this.onDelete}

Answer 3

所做的更改为{this.props.items.map(createItem)}至{this.props.items.map(createItem,this)}

var TodoList = React.createClass({
    remove : function(index){
        console.log('remove from here:',this.props.items);
        console.log('index:',index);
    },
    render: function() {
        var createItem = function(itemText,i) {
            return (
                <TodoListItem onDelete={this.remove.bind(this,i)} index={i} key={i}>{itemText}
                </TodoListItem>
            );
        };
        return(
            <ul id="staggered-test" className="collection 
                with-header">
                <li className="collection-header">
                    <h4>todo list</h4>
                    {this.props.items.map(createItem,this)}
                </li>
            </ul>
        )
    }
});

类remove中不需要函数TodoListItem，因为父函数具有函数，因此它可以通过props传递。

var TodoListItem = React.createClass({
    render : function(){
        return(
            <li className="collection-item">
                <div>{this.props.children}
                    <a onClick={this.props.onDelete} href="#" 
                    className="secondary-content">
                        <i className="material-icons">delete</i>
                    </a>
                </div>
            </li>
        )
    }
});

未捕获的TypeError：this.props.onDelete不是函数reactjs

3 个答案: