我创建了一个反应父组件,它将一些道具传递给它的子组件,并保存一个onClick函数。 onClick函数应该是console.log' WORKED'单击“产品”组件时,这不起作用,并且不会出现在控制台上。我不明白我哪里出错了,这应该很简单。我犯了一个我一直错过的愚蠢错误吗?
这是我的父组件代码:
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);
这是Product(子)组件的代码:
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);
答案 0 :(得分:1)
您没有使用传递给该组件内onClick
组件的product
道具。因此它没有被解雇。你必须将事件处理程序分配给product
组件中的某个元素,这将触发传递给它的方法,就像这样的支柱
// Product.js component
render() {
return (
<div onClick={this.props.onClick} style={{margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'}}>
....
答案 1 :(得分:1)
您将onClick作为prop从父组件传递到子组件,但在子组件中我没有看到您调用props.onClick子组件中的某些click事件。