Question

当我使用Reactjs时，我遇到了问题，我对Reactjs很新，所以也许这是一个简单的问题：

class Product extends Component{
    handleUpVote() {
        this.props.onVote(this.props.id)
    }

    render(){
        return(
            <div className='item'>

                <div className='middle aligned content'>
                    <div className='header'>
                        <a onClick={this.handleUpVote}>
                            <i className='large caret up icon'></i>
                        </a>
                        {this.props.votes}
                    </div>
                </div>
            </div>
        )
    }
}

class ProductList extends Component {
    handleProductUpVote(prductId){
        console.log(productId +' was upvoted')
    }

    render() {
        const products1 = Data.sort((a,b) => (
            b.votes-a.votes
        ));
        const products=products1.map((product) =>{

        return (
            <div className='ui items'>
                <Product
                    key={'product-'+product.id}
                    id={product.id}
                    onVote={this.handleProductUpVote}
                  />
            </div>
        )})

        return (
            <div className='ui items'>
                {products}
            </div>
        )
    }}
    export default ProductList;

在这一行，我收到错误，我不明白为什么：

this.props.onVote(this.props.id)

Answer 1

忘记绑定这个。

您需要将ID作为参数传递给您的点击处理函数。

这样的事情：

class Product extends Component{

    handleUpVote(id) {
      this.props.onVote(id)
    }

    ...


      <Product
        key={'product-'+product.id}
        id={product.id}
        onVote={() => this.handleProductUpVote(product.id)}
      />
}

未定义ReactJS产品ID

1 个答案: