React.js和ES2015 -将方法从父级传递给子级

Question

当用户单击删除按钮时，我试图删除子元素(注意)。删除方法是在父(板)上，我试图通过props将其传递给子，但它不工作。

我尝试使用简单的remove, this。remove -未定义remove，或this, this.remove.bind(this)似乎没有工作;location: eachNote(text,i) method

import React from 'react';
import ReactDOM from 'react-dom';

class Note extends React.Component{
    constructor(props){
        super(props);
        this.state = {editing: false};
    }
    edit() {
        this.setState({editing: true});
    }
    save() {
        let val = this.refs.newText.value;
        this.setState({editing: false});
    }
    renderNormal(){
        return (
            <div>
                <p>{this.props.children} </p>
                <button type="button" onClick={this.edit.bind(this)}>Edit</button>
                <button type="button" onClick={this.hRemove.bind(this)}>Remove</button>
            </div>
        );
    }
    renderForm(){
        return (
        <div>
            <textarea ref="newText" defaultValue={this.props.children}></textarea>
            <button type="button" onClick={this.save.bind(this)}>Saved</button>
        </div>
    );
    }
    render() {
            if(this.state.editing ==true ) {return this.renderForm();}
            else {return this.renderNormal();}
    }
}
class Board extends React.Component{
    constructor(props) {
        super(props);
        this.state = {comments: ['icecream','antimoniu','bentrans'] };
    }
    remove(i){
        let arr = this.state.comments;
        arr.splice(i,1);
        this.setState({comments: arr});
    }
     eachNote(text,i) {
        return (<Note key={i} index={i} hRemove={this.remove}>{text}</Note>);
    }
    render(){
        return (
            <div>
                {this.state.comments.map(this.eachNote)}
            </div>
        );
    }
}
ReactDOM.render(<Board />, document.getElementById('container'));

---

我尝试了Rafi Ud Daula Refat和Sven(感谢答案)代码和下面一个，但我仍然收到错误:这是未定义的;

在父元素中，我有:

eachNote(text,i) {
    return (<Note key={i} index={i} hRemove={this.remove.bind(i)}>{text}  </Note>);
 }

在Child中，我有:

removed(i) {
    this.props.hRemove(i);
}
renderNormal(){
       return (
            <div>
                <p>{this.props.children} </p>
                <button type="button" onClick=     {this.edit.bind(this)}>Edit</button>
               <button type="button" onClick=  {this.removed.bind(this,i)}>Remove</button>
        </div>
    );
}

我也尝试了this.remove.bind(this)和this.remove.bind(I)， hRemove={this.remove.bind(I)}，和他们的组合不工作

Answer 1

如果你想使用父类的一个方法，你应该把这个函数作为props传递给子类。从子目录你可以通过

访问它

this.props.functionName

Here in your note Component

        <button type="button" onClick={this.hRemove.bind(this)}>Remove</button>

但是注意组件没有任何名为hRemove的方法。它可以通过

传递

this.props.hRemove ()

        <button type="button" onClick={this.props.hRemove(idorsomething)}>Remove</button>

因为父组件中的remove函数只有一个参数。因此，从子组件笔记中，你已经传递了变量a，然后它将工作。像

this.props.hRemove (id)

Answer 2

当您将函数remove作为hRemove prop传递给Note时，您可以在this.props.hRemove中找到它。

您也可以将Note直接bind到传递的remove函数:

eachNote(text,i) {
    return (<Note key={i} index={i} hRemove={this.remove.bind(i)}>{text}</Note>);
}

然后使用

<button type="button" onClick={this.props.hRemove}>Remove</button>

请记住，在ES6中，您的自定义渲染方法中没有this，这可以通过几种方式完成:http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html