이벤트를 하위 컴포넌트에 전달합니다.

Question

저는 처음에 반응을 보였습니다. 그리고 이것은 매우 멍청한 질문이지만, 왜 작동하지 않는지 이해할 수 없습니다.

간단한 할 일 목록을 작성하려고합니다.

import React, {Component} from 'react'; 

    export default class TodoItem extends Component{ 
     render(){ 
     return (
      <div>{this.props.title} 
      <button onClick={this.props.remove}>X</button> 
      </div> 
     ) 
     } 
    } 

그러나 나는 "정의되지 않은 재산 'handleRemove'읽을 수 없습니다"와 형식 오류를 얻을 :

import React, {Component} from 'react'; 
import TodoItem from './TodoItem'; 

    export default class TodoList extends Component{ 
     constructor(props){ 
     super(props); 
     this.state = { 
      todos:[ 
      { 
       title:"todo1" 
      }, 
      { 
       title:"todo3" 
      }, 
      { 
       title:"todo2" 
      } 
      ] 
     } 

     } 

     handleRemove(idx){ 
     alert('works'); 
     } 

     render(){ 
     var todos = this.state.todos.map(function(t,idx){ 
      return(<TodoItem 
        remove={this.handleRemove.bind(this,idx)} 
        title={t.title} 
      />) 
     }) 

     return (
      <div> 
      <h1>To do</h1> 
      <div>{todos}</div> 
      </div> 
     ) 
     } 
    } 

우리 아이 구성 요소는 다음과 같습니다

내 TodoList.js 구성 요소는 다음과 같습니다. 왜지도 내부에 {this} 정의되지 않은 궁금하네요?

나는 이것을 this.handleRemove = this.handleRemove.bind(this)을 생성자에 넣으려고했다.

아무 것도 변경하지 않았습니다. 안에 this도 정의하면 안됩니까?

Answer 1

당신은 콜백의이 값으로 사용됩니다하는 thisArg 매개 변수를 매핑하기 위해 제공되는 경우 second argument

로 this을 넣어해야합니다. 그렇지 않은 경우 정의되지 않은 값은이 값으로 으로 사용됩니다. 궁극적으로 콜백으로 관찰 할 수있는이 값은 이라는 함수를 사용하여이를 확인하기위한 일반적인 규칙에 따라 결정됩니다. map에

:

또는

render(){ 
     var todos = this.state.todos.map(function(t,idx){ 
      return(<TodoItem 
        remove={this.handleRemove.bind(this,idx)} 
        title={t.title} 
      />) 
     }, this) 

     return (
      <div> 
      <h1>To do</h1> 
      <div>{todos}</div> 
      </div> 
     ) 
     } 
    } 

, 당신은 자동으로 현재 this 컨텍스트를 유지하기 위해 ES6 arrow function를 사용할 수 있습니다

var todos = this.state.todos.map((t,idx) => { 
    return(<TodoItem 
    remove={this.handleRemove.bind(this,idx)} 
    title={t.title} 
    />) 
})