Question

然而this.props.NotesAll从另一个组件中检索对象并且它在render（）方法下显示对象但是当我尝试使用this.props.NotesAll时在使用这些对象的函数上渲染的顶部，我试图通过控制台检查函数值，它只是总是说未定义的狗屎。所以，请帮助我ReactNinja，这里究竟出现了什么问题。

此处可以查看代码

export default class EditNotes extends Component {
    constructor(props) {
        super(props);
        this.state ={};
    }


    handleEdit() {
        console.log(this + ' Clicked on That ');
    }

//Here it's throwing error when I'm trying to click and console. the problem is here. i want this.props.NotesAll value here also to finding elements from objects
    handleDelete(id) {
        let Notes = this.props.NotesAll;
        console.log(Notes)
    }

    render() {
        let noteItems;

// this.props.NotesAll在这里工作正常。

        if (this.props.NotesAll) {
            noteItems = this.props.NotesAll.map( Note => {
                return(
                    <li key={Note.id}>{Note.body}
                    <button onClick={this.handleEdit.bind(Note.id)} className="btn btn-primary btn-sm">Edit</button>
                    <button onClick={this.handleDelete.bind(Note.id)} className="btn btn-danger btn-sm">Delete</button></li>
                    );
            });
        }
        return(
            <div className="col-md-4">
                <h3 className="header-ttile">Current Notes:</h3>
                <ul className="note-item-wrapper">
                {noteItems}
                </ul>
            </div>
            );
    }
}

Answer 1

您以错误的方式定义绑定，第一个参数将是您要绑定的上下文。

使用此：

<button onClick={this.handleDelete.bind(this, Note.id)}

<强> Syntax:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

<强> thisArg：

作为this参数传递给目标函数的值当调用绑定函数时。

Answer 2

constructor(props) {
    super(props);
    this.state ={};
    this.notes = props.notesAll;
    this.handleDelete = this.handleDelete.bind(this);
}

然后尝试在handeDelete函数中访问this.notes。我不确定，因为我既不是反应忍者，但我认为它应该这样工作

道具值不显示在函数ReactJS的渲染之上

2 个答案: