React事件处理程序:为什么父事件没有被子绑定覆盖
React事件处理程序:为什么父事件没有被子绑定覆盖
提问于 2019-06-07 13:22:43
我在youtube上参加了JS速成班-2019年，我没能找到以下问题的答案。
父组件中的方法上下文未被子绑定调用覆盖的原因。
代码库可以在这里找到，todo
但是为了简化这个问题，这里有一个小的代码片段。
父级
class App extends Component {
state = {
todos: []
}
// Toggle Complete
markComplete = (id) => {
this.setState({ todos: this.state.todos.map(todo => {
if(todo.id === id) {
todo.completed = !todo.completed
}
return todo;
}) });
}
render() {
return (
<TodoItem markComplete={this.markComplete} />
);
}
}孩子
export class TodoItem extends Component {
render() {
const { id, title } = this.props.todo;
return (
<input type="checkbox" onChange={this.props.markComplete.bind(this, id)} /> {' '}
)
}
}根据我对bind objects/Function/bind的理解，我希望当标记markComplete被调用时，"this“将是子上下文，但它仍然是父上下文。
markComplete = (id) => {
this.setState({ todos: this.state.todos.map(todo => {
^^^^ why it is not child
if(todo.id === id) {
todo.completed = !todo.completed
}
return todo;
}) });
}我确实理解公共类字段的语法。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-08-12 09:28:14
由于MDN在其文档中没有提到这一点，这里是到ECMASript的官方链接，这说明了这种情况。
https://www.ecma-international.org/ecma-262/6.0/#sec-function.prototype.bind
注意-> 注2
如果目标是箭头函数或绑定函数，那么传递给该方法的thisArg将不会被随后调用F.使用。
Stack Overflow用户
发布于 2019-06-07 13:26:14
那是因为你使用的是箭头函数。箭头函数使用“此词”，而不是“调用者”。尝试像这样编写您的方法，那么绑定应该可以工作：
markComplete(id) {
this.setState({ todos: this.state.todos.map(todo => {
if(todo.id === id) {
todo.completed = !todo.completed
}
return todo;
}) });
}词法：http://es6-features.org/#Lexicalthis
编辑
您还可以使用function：markComplete = function(id) { /*...*/ }将您的函数编写为“经典”函数。
Stack Overflow用户
发布于 2019-06-07 13:25:25
箭头函数自动绑定到当前上下文，在您的情况下，当前上下文将是父上下文。
将其更改为普通函数，并在父构造函数中手动绑定。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56495200
复制相关文章
相似问题
腾讯云开发者
