Question

我仍然点击按钮Form.js：232 Uncaught TypeError：无法读取属性'removeTrash'的null

  removeTrash(index) {
        console.log('remove', index);
    }



    <tbody>
                                    {this.state.trashArray.map(function (data, index) {
                                        return <tr>
                                            <th scope="row" key={data.key}>{index + 1}</th>
                                            <td>{data.odpad}</td>
                                            <td>{data.waga}</td>
                                            <td>
                                                <button type="button" value="add" className="btn btn-danger btn-remove"
                                                        onClick={function (data, index) {
                                                            console.log(data);
                                                            this.removeTrash(index);
                                                        }}>X
                                                </button>
                                            </td>
                                        </tr>;
                                    })
                                    }
                                    </tbody>

Answer 1

console.log(data);
this.removeTrash(index);

这里this引用包含它的函数而不是类！

为了解决这个问题，在返回<tbody> ...</tbody>之前添加此行替换它，

let that = this

然后

that.removeTrash(index);

Answer 2

它是一个绑定问题，你需要绑定onClick方法。试试这个：

<button type="button" value="add" className="btn btn-danger btn-remove"
        onClick={()=>{this.removeTrash(index)}}
</button>

或

<button type="button" value="add" className="btn btn-danger btn-remove"
     onClick={this.removeTrash.bind(this,index)}
</button>

并使用这部分：

{this.state.trashArray.map((data, index)=> {
    return 
        <tr>
            <th scope="row" key={data.key}>{index + 1}</th>
            <td>{data.odpad}</td>
            <td>{data.waga}</td>
            <td>
                <button type="button" value="add" className="btn btn-danger btn-remove"
                        onClick={this.removeTrash.bind(this, index)}>
                    X
                </button>
            </td>
        </tr>;
    })
}

Gett访问React中的方法

2 个答案: