반응 onChange가 의도 한대로 작동하지 않음

Question

나는 웹 사이트에서 모든 제품을 사용할 수있는 제품 구성 요소를 만들려고 노력하고 있으며 각 제품을 상자와 비슷한 종류로 표시합니다. 사용자가 상자를 클릭하면 해당 상자로 리디렉션됩니다. 제품 페이지. 나는 react 및 redux를 사용하고 있으며 onClick에서 어려움을 겪고 있습니다. 내 코드는

class Products extends Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      products: [...Some array] 
    }; 

} 
handleProductRedirect(productNumber){ 
    console.log(productNumber) 
    // Redux function 
    // this.props.handleRedirect(productNumber) 
} 
render(){ 
    var products = this.state.products 
    return (
     <div id="content"> 
       {product && 
        <div id="searchContent"> 
         {product.map(element => <Item element={element} 
                handleProductRedirect={this.handleProductRedirect.bind(this)} 
                key={element['productNumber']}/>)} 
        </div> 
       } 
      </div> 


     </div> 
    ) 
} 
}; 

class Item extends Component{ 
    render(){ 
     var element = this.props.element; 
     return (
      <div id="itemBox" onClick={this.props.handleProductRedirect(element['productNumber'])}> 
       <h3>{elementTitle.slice(0, 85)}</h3> 
       <p>{element.Manufacturer}</p> 
      </div> 

     ) 
    } 
} 

그렇게 구성 요소가 API에서 제품을 가져오고 그것이 그들을 통해 반복 처리를 얻을 일단의 모습입니다. 그러나 크롬 개발자 콘솔을 사용하면 모든 <Item /> 구성 요소를 반복하면서 해당 항목을 클릭하지 않았더라도 handleProductRedirect을 호출한다는 사실을 알게되었습니다. 자동으로 처리합니다. div itemBox을 클릭 할 때 해당 함수를 호출하는 대신 렌더링 될 때 호출합니다. 모든 귀하의 onclick 여기에 함수를 호출한다

Answer 1

각 항목마다 모든 렌더링에서 handleProductRedirect을 호출했기 때문입니다. 사용자가 실제로 요소를 클릭

class Item extends Component{ 
    onClickItem =() => { // <=== Defines the callback and bind it to the instance 
    const { element } = this.props; 
    this.props.handleProductRedirect(element['productNumber']); 
    }; 

    render(){ 
    var element = this.props.element; 
    return (
     <div id="itemBox" onClick={this.onClickItem}> 
      <h3>{elementTitle.slice(0, 85)}</h3> 
      <p>{element.Manufacturer}</p> 
     </div> 

    ) 
    } 
} 

당신이 모든 렌더링에 콜백을 호출하지 않는이 방법하지만, 대신 그, 당신은 onClick 소품에 콜백을 보내이 같은 필요합니다.

또한 구성 요소에 propTypes을 정의하는 것을 잊지 말고 나중에 문제를 잡는 데 도움이됩니다.

Answer 2

제안 :

onClick={this.props.handleProductRedirect(element['productNumber'])}> 

대신 당신은 인수를 호출하는 함수를 반환해야합니다. 당신은이 같은 화살표 기능하여이 작업을 수행 할 수 있습니다

onClick={() => this.props.handleProductRedirect(element['productNumber'])}> 

하지만 클래스 메소드로 추출하는 것입니다 할 수있는 가장 좋은 방법은 (당신이 필요하지 않도록 재 - 렌더링) :

class Item extends Component { 
    clickProduct =() => { 
    this.props.handleProductRedirect(this.props.element['productNumber']); 
    } 

    render() { 
    var element = this.props.element; 
    return (
     <div id="itemBox" onClick={this.clickProduct}> 
     <h3>{elementTitle.slice(0, 85)}</h3> 
     <p>{element.Manufacturer}</p> 
     </div> 
    ); 
    } 
}