Question

我已经使用reactjs创建了一个购物车，现在我将一个对象传递到购物车中，我可以添加数量，然后将自动计算产品的小计。但是现在我必须使用此小计值来计算总计。那么，我能否知道如何访问表列“小计”并计算所购买产品的总价？

我已附上下表。

Answer 1

这是为您提供的一种解决方案： 使用参考

有关更多信息，您可以在这里阅读：Refs and the DOM

这是一个与您的需求紧密相关的示例。

class CustomTextInput extends React.Component {
      constructor(props) {
        super(props);
        // create a ref to store the textInput DOM element
        this.textInput = React.createRef();
        this.focusTextInput = this.focusTextInput.bind(this);
      }
    
      focusTextInput() {
        // Explicitly focus the text input using the raw DOM API
        // Note: we're accessing "current" to get the DOM node
        this.textInput.current.focus();
      }
    
      render() {
        // tell React that we want to associate the <input> ref
        // with the `textInput` that we created in the constructor
        return (
          <div>
            <input
              type="text"
              ref={this.textInput} />
    
            <input
              type="button"
              value="Focus the text input"
              onClick={this.focusTextInput}
            />
          </div>
        );
      }
    }

Answer 2

在react中，您应该尝试使UI渲染受react状态控制。对于您的情况，如果要访问小计，则可以这样设计组件状态：

class Cart extends React.Component {
constructor(props) {
  super(props);
  // initial cart state
  this.state = {
    total: 0,
    inCartItems: {
      ddd: {
        price: 12,
        quantity: 0,
        subtotal: 0,
      },
      www: {
        price: 45,
        quantity: 0,
        subtotal: 0,
      },
      e3400: {
        price: 45,
        quantity: 0,
        subtotal: 0,
      },
    },
  };
}
handleChange = (itemName, quantity) => {
  // set new inCartItems state
  // then use the updated state to calculate total by just sum up the subtotal in each items
}
render() {
  return (
    // your table content
    <div>
      {/*handle item number change like this*/}
      <input onChange={(e) => this.handleChange('ddd', e.target.value)} />
      <input onChange={(e) => this.handleChange('www', e.target.value)} />
      <input onChange={(e) => this.handleChange('e3400', e.target.value)} />
      <div className={'total'}>
        {this.state.total}
      </div>
    </div>
    // ....
  );
}
}

如何在React中访问表单元格数据

2 个答案: