Question

我想在cart构造函数中动态设置一个值。我的cart变量有price，item。和大小值。我想动态地为item分配一个项目的值。这是我的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addCart } from '../../actions';
import { withRouter } from 'react-router';
//import { Cart } from './webcart';


import CamoHat from './camodye.jpeg';
import TonyTape from './TonyTape.png';
import RegularHat from './regularhat.jpg';
import JaguarShirt from './JAGUARLOGO.png';
import SeltzShirt from './seltzshirt.jpg';
import NocHoodie from './NOCNOCHOODIE.png';

export class WebShop extends Component {
    constructor(props){
        super(props);
        this.state = {value: 'medium', cartData: {} };
        this.handleClick = this.handleClick.bind(this);
        this.change = this.change.bind(this);
        this.goProductPage = this.goProductPage.bind(this);
        this.goProductPage2 = this.goProductPage2.bind(this);
        this.goProductPage3 = this.goProductPage3.bind(this);
    }

    handleClick() {
        let cart = {price:0,item:"userselection",size:this.state.value};
        this.props.onCartAdd(cart);
        this.itemSelection(cart);
    } 

    change(e){
        this.setState({value: e.target.value})
    }

    itemSelection(cart){
        let userItem = cart;
        let userSelection = cart
        if (userItem == "shirt1") {
           let itemPrice = 20.00;
        }
    }
    ...

    render() {
        return (
            <div className='Webshop' id='Webshop'>
                <ul id="Productlist">
                    <div className='Product'>
                      <img src={CamoHat} onClick={this.goProductPage}></img>
                      <div id='infoname'>NOC NOC HAT (CAMO)</div>
                      <div id='infoprice'>40.00</div>
                    </div>
                    <div className='Product'>
                      <img src={JaguarShirt} onClick={this.goProductPage2}></img>
                      <div id='infoname'>JAGUAR PYRAMIDS T-SHIRT</div>
                      <div id='infoprice'>25.00</div>
                    </div>
                    <div className='Product'>
                      <img src={SeltzShirt} onClick={this.goProductPage3}></img>
                      <div id='infoname'>JAGUAR PYRAMIDS T-SHIRT</div>
                      <div id='infoprice'>25.00</div>
                    </div>
                    <div className='Product'>
                      <img src={NocHoodie} onClick={this.goProductPage}></img>
                      <div id='infoname'>JAGUAR PYRAMIDS T-SHIRT</div>
                      <div id='infoprice'>25.00</div>
                    </div>
                    <div className='Product'>  
                      <img src={RegularHat}></img>
                      <button onClick={this.handleClick} className="addit">Add to cart</button>
                      <select id="size" onChange={this.change} value={this.state.value}>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <option value="x-large">X-large</option>
                      </select>
                    </div>
                    <div className='Product'>  
                      <img src={TonyTape}></img>
                      <button onClick={this.handleClick} className="addit">Add to cart</button>
                      <select id="size" onChange={this.change} value={this.state.value}>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <option value="x-large">X-large</option>
                      </select>
                    </div>
                </ul>
            </div>
        );
    }
}

...

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

我想使用项目item中的项目说明（文本本身）为cart分配div id=infoname值，例如：NOC NOC Hat。我怎么能在我的功能中做到这一点？有没有更好的方法呢？

Answer 1

做你想做的最快捷的方法是使用refs： https://facebook.github.io/react/docs/refs-and-the-dom.html

来自官方文档的引用：

ref属性采用回调函数，回调函数为   在安装或卸载组件后立即执行。

当ref元素用于HTML元素时，ref回调   接收底层DOM元素作为其参数

我已从代码中删除了一些代码，以便为我编译。这里是： https://codesandbox.io/s/314N8jxG9

查看第22行和第46行。（查看console.log输出）

ref属性接收一个可以访问div元素的回调，因此它是innerHTML值。

这不是最好的方法，但这可以解决您的问题。

现在最好的是使用道具。

请首先通过以下方式将产品项目提取到ProductIem中来重构代码：

  const ProductItdem = ({description, price})=>{
        return (
              <div className='Product'>
                          <div id='infoname'   >{description}</div>
                          <div id='infoprice'>{price}</div>
                        </div>
        );
    }

您甚至可以在ProductList组件中撰写它们。然后，您将从WebShop容器组件传递道具到dumm组件。

尝试一下，让我们知道你的问题。

如何从React组件中的div加载值？

1 个答案: