Question

当用户单击“删除”按钮时，我尝试删除子元素（注释）。删除方法是在父（Board）上，我尝试将它传递给子项通过道具，但它不起作用。

我尝试使用简单的删除，this.remove - 未定义删除，或者这个，this.remove.bind（this）似乎没什么用;位置：eachNote（text，i）方法

＆＃13;

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'));

＆＃13;

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

在父母的

中，我有：

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

在孩子身上，我有：

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>
    );
}

我也试过了.removed.bind（this）和this.removed.bind（i），hRemove = {this.remove.bind（i）}，他们的组合不起作用

Answer 1

如果你想使用一种父方法，你应该把这个函数作为道具传递给孩子。从孩子那里你可以访问它

this.props.functionName

在您的笔记组件

中

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

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

来确定

this.props.hRemove（）

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

并且功能＆＃39;删除＆＃39;在父组件中有一个参数。因此，从子组件注释中，您已传递变量a。然后它会工作。像

this.props.hRemove（id）

Answer 2

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

您还可以bind将Note直接发送给通过的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

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

2 个答案: