는 Reactjs

Question

에서 매개 변수가있는 생성자의 기능을 결합하는 방법

그래서 여기 내 함수의

constructor() 
{ 
    this.remove = this.remove.bind(this); 
} 
render() 
{ 
    return (
     <div> 
      { this.state.search.map((item, index) => 
       ( 
        <button key={index} onClick={this.remove(item)}>{item.search}: {item.text}</button> 
       )) 
      } 
      </div> 
     </div> 
    ); 
} 

하지만 제대로 작동하면 생성자에서 바인딩을 제거하고 (사실 상관 없음)이 단추를 다음과 같이 변경하십시오.

<button key={index} onClick={this.remove.bind(this, item)}>{item.search}: {item.text}</button> 

내 궁금한 점은 매개 변수를 사용할 수 있도록 생성자에서 바인딩하는 방법이 있습니까?

Answer 1

this.remove(item)과 this.remove.bind(this, item)의 차이는 첫 번째 은 기능이이고 두 번째는 새로운 기능을 생성한다는 것입니다. 불필요한 비록

So my question is, is there a way to bind it in the constructor so that it can take on the parameter?

당신은, this.remove.bind(this, item)및이 (가) 생성자를 바인딩을 수행 할 수 있습니다. 이벤트 핸들러에 item를 전달하려는 경우

는, 당신은 당신의 현재 설정과, item에 액세스 할 수 있습니다 .map에 새로운 기능을 만들에 있습니다 . 이것은 .bind 또는 폐쇄를 통해 이루어질 수 있습니다. 두 경우 모두 생성자에서의 바인딩은 단순히 필요하지 않습니다.

item과 다른 방식으로 제공하는 경우에만 새 기능을 만들 수 있습니다.

function Button({item, onClick}) { 
    return <button onClick={() => onClick(item)}>{item.search}: {item.text}</button>; 
} 

class Component extends React.Component { 
    constructor() 
    { 
     this.remove = this.remove.bind(this); 
    } 

    render() 
    { 
     return (
      <div> 
       { this.state.search.map((item, index) => 
        ( 
         <Button key={index} onClick={this.remove} item={item} /> 
       )) 
       } 
       </div> 
      </div> 
    ); 
    } 
}