如何从一个组件传递方法到另一个不使用箭头函数?

Question

在下面的代码片段中，我必须将方法'handleChange'传递给另一个组件'TodoList'。我试过绑定这个方法，但是没有解决问题。

import React from "react";
import TodoList from "./TodoItem";
import "./TodoStyles.css";
import {list} from "./TodoList"
class TodoApp extends React.Component   {
constructor(){
super();
this.state = {
todos : list
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(id){
console.log("Changed",id);
}
render(){
const todoArr = this.state.todos.map(
function(i){
return <TodoList key = {i.id} arr = {i} handleChange = {this.handleChange}/>
}
);
return( 
<div className = 'todo-list'>
{todoArr}
</div>
)
}

}
export default TodoApp

但是使用箭头函数而不是常规函数，它解决了这个问题。

const todoArr = this.state.todos.map(
(i) => {
return <TodoList key = {i.id} arr = {i} handleChange = {this.handleChange}/>
}
);

错误消息

我的问题是，我们可以传递函数"handleChange"到使用常规函数的其他组件?

我在ES6和反应在过去的1周，我试图在网上搜索解决方案，但没有得到任何可以解决我的问题。所以，请温柔一点。

Answer 1

我不知道为什么你不能使用箭头函数。它们已经被所有浏览器支持了好几年了——如果你真的需要支持IE之类的东西，像Babel这样的工具(你可以很容易地配置像Webpack这样的打包器来使用它)可以自动将你的代码转换为ES5。

然而，如果你真的不能，你可以使用旧的"词汇this"提示:箭头函数被设计为:

的替代品

const self = this;
const todoArr = this.state.todos.map(
function(i){
return <TodoList key = {i.id} arr = {i} handleChange = {self.handleChange}/>
}
);

注意，构造函数中的this.handleChange = this.handleChange.bind(this)在这里没有直接帮助。(尽管您仍然需要上面的代码使其工作。)它通常被使用，所以你可以传递this.handleChange作为一个事件处理程序，并让它使用正确的this-在这里，map内部的功能已经使用自己的this，所以把this.handleChange在事件处理程序不会引用正确的东西，即使你绑定。

Answer 2

Array.prototype.map()接受第二个参数来设置this在映射函数中引用的内容，因此将其作为第二个参数传递以保留当前上下文。[*]

你可以试试:

const todoArr = this.state.todos.map(
function(i){
return <TodoList key = {i.id} arr = {i} handleChange = {this.handleChange}/>
}, this
);

[*] https://stackoverflow.com/a/30148997/1927991