onClick-Ereignis in React Elternkomponente funktioniert nicht

Question

Ich habe eine Reactive-Elternkomponente erstellt, die einige Requisiten an die untergeordnete Komponente übergibt und eine onClick-Funktion enthält. Die onClick-Funktion sollte console.log 'WORKED', wenn auf eine Produktkomponente geklickt wird, dies funktioniert nicht und nichts auf der Konsole angezeigt werden. Ich verstehe nicht, wo ich falsch gelaufen bin, das sollte so einfach sein. Habe ich einen dummen Fehler gemacht, den ich vermisse?

hier ist meine Mutterkomponentencode:

import React from 'react'; 
import { connect } from 'react-redux'; 
import Product from '../components/product.js'; 
import { bindActionCreators } from 'redux'; 
import { changeTotal } from '../actions/index.js'; 
import { selectProduct } from '../actions/index.js'; 

class ProductList extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state={ 
      total: 0 
     } 

     this.addFromTotal = this.addFromTotal.bind(this); 
     this.subtractFromTotal = this.subtractFromTotal.bind(this); 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     console.log('done') 
    } 

    addFromTotal(product) { 
     var x = Number(product.price) 
     this.setState({total: this.state.total + x},() => { 
      console.log('total is ' + this.state.total); 
      var total = this.state.total; 
      this.props.changeTotal(total); 
     }); 
    } 

    subtractFromTotal(product) { 
     var x = Number(product.price) 
     this.setState({total: this.state.total - x},() => { 
      console.log('total is ' + this.state.total); 
      var total = this.state.total; 
      this.props.changeTotal(total); 
     }); 
    } 

    render() { 
     var createProductList = this.props.products.map((product, i) => { 
      return <Product 
        key={i} 
        title={product.title} 
        price={product.price} 
        definition={product.definition} 
        source={product.source} 
        addFromTotal={() => this.addFromTotal(product)} 
        subtractFromTotal={() => this.subtractFromTotal(product)} 
        // onClick={() => this.props.selectProduct(product)} 
        onClick={this.handleClick} 
        /> 
     }); 
     return (
      <div> 
       <div>Product List</div> 
       <div style={{display: 'flex', flexDirection: 'row'}}>{createProductList}</div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     products : state.products 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ changeTotal: changeTotal }, dispatch); 
} 


export default connect(mapStateToProps, mapDispatchToProps)(ProductList); 

hier ist der Code für das Produkt (Kind) Komponente:

import React from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { updateItemObject } from '../actions/index.js' 

class Product extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      counter: 0, 
      itemTotal: 0 
     } 

     this.handleAdd = this.handleAdd.bind(this); 
     this.handleSubtract = this.handleSubtract.bind(this); 
    } 

    handleAdd(product) { 
     var x = Number(this.props.price) 
     this.setState({ 
      itemTotal: this.state.itemTotal + x, 
      counter: this.state.counter + 1 
     },() => { 
      console.log('item total ' + this.state.itemTotal); 
      console.log('item count ' + this.state.counter); 
      this.props.addFromTotal(product); 
     }); 
    } 

    handleSubtract(product) { 
     if(this.state.counter === 0) { 
      return; 
     } 

     var x = Number(this.props.price) 
     this.setState({ 
      itemTotal: this.state.itemTotal - x, 
      counter: this.state.counter - 1 
     },() => { 
      console.log('item total ' + this.state.itemTotal); 
      console.log('item count ' + this.state.counter); 
      this.props.subtractFromTotal(product); 
     }); 
    } 

    render() { 
     return (
      <div style={{margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'}}> 
       <div>product name: {this.props.title}</div> 
       <div>product price: {this.props.price}</div> 
       <div>product definition: {this.props.definition}</div> 
       <div style={{ 
        backgroundImage: this.props.source, 
        backgroundSize: 'cover', 
        padding: '15px', 
        margin: '15px', 
        height: '200px', 
        width: '250px' 
       }}> 
       </div> 
       <div> 
        <span style={{cursor: 'pointer'}} onClick={this.handleAdd}>+ </span> 
        <span style={{cursor: 'pointer'}} onClick={this.handleSubtract}>-</span> 
       </div> 
       <div> 
        <div>x{this.state.counter} {this.props.title} for a sum of {this.state.itemTotal}</div> 
       </div> 
      </div> 
     ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ updateItemObject: updateItemObject }, dispatch); 
} 

export default connect(null, mapDispatchToProps)(Product); 

Answer 1

Sie sind die onClick prop nicht verwenden im Inneren, die zu product Komponente übergeben Komponente. Deshalb wird es nicht gefeuert. Sie haben die Event-Handler zu einem Element in product Komponente zu versehen, das das Verfahren, um es als Stütze so etwas wie dieses

// Product.js component 
render() { 
     return (
      <div onClick={this.props.onClick} style={{margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'}}> 
     .... 

Answer 2

Ihre vorbei onClick als von der übergeordneten Komponente an die untergeordnete Komponente prop geleitet wird ausgelöst, aber in der untergeordneten Komponente habe ich nicht gesehen, dass Ihr Aufruf props.onAuf ein click-Ereignis in der untergeordneten Komponente klicken.