Question

每当我执行一个从文本字段调用值的函数时，我都会遇到问题

我的道具代码的setstate：

selectedOrder: {
    breakdown: [{
      size: 'xs',
      quantity: '0'
    }, {
      size: 's',
      quantity: '0'
    }]
}

我的功能代码如下：

onSizeChange = (propName, event, index, value) => {
    var newSize = this.state.selectedOrder;

    if (_.findWhere(newSize.breakdown, {size: propName}).quantity !== event.target.value) {
      _.findWhere(newSize.breakdown, {size: propName}).quantity = event.target.value;
      this.setState({selectedOrder: newSize})
    }
  }

和我的文本域代码

<TextField 
  type='number' floatingLabelText='XS' min={0} 
  value={_.findWhere(this.state.selectedOrder.breakdown, {size: 'xs'}).quantity}
  onChange={this.onSizeChange.bind(this, 'xs')}
  fullWidth />

这是我所遇到的错误的屏幕截图。第425行是TextField的值行 [

这是完整的代码。错误发生在函数onAddOrder

上

class OrderForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      orders: [],
      selectedOrder: {
        category: '',
        product: '',
        price: '',
        color: '',
        brand: '',
        breakdown: [{
          size: 'xs',
          quantity: '0',
        }, {
          size: 's',
          quantity: '0',
        }]
      },
    };
  }
  onAddOrder = () => {
    var newOrders = this.state.orders;
    newOrders.push({
      breakdown: [{
            size: 'XS',
            quantity: _.findWhere(this.state.selectedOrder.breakdown, {size: 'xs'}).quantity
          }, {
            size: 'S',
            quantity: _.findWhere(this.state.selectedOrder.breakdown, {size: 's'}).quantity
          }, {
            size: 'M',
            quantity: this.refs.sizeM.getValue(),
          }, { 
            size: 'L',
            quantity: this.refs.sizeL.getValue(),
          }, {
            size: 'XL',
            quantity: this.refs.sizeXL.getValue(),
          }, {
            size: '2XL',
            quantity: this.refs.size2XL.getValue(),
          }, {
            size: '3XL',
            quantity: this.refs.size3XL.getValue(),
          }
      ]
    });

    this.setState({ 
      orders: newOrders 
    });
  }

  render() {  
    return (
<div>

                  <Row>
                      <Col xs={1}>
                        <TextField 
                        type='number' floatingLabelText='XS' min={0} 
                        value={_.findWhere(this.state.selectedOrder.breakdown, {size: 'xs'}).quantity}
                        onChange={this.onSizeChange.bind(this, 'xs')}
                        fullWidth />
                      </Col>
                      <Col xs={1}>
                        <TextField type='number' floatingLabelText='S' min={0} 
                        value={_.findWhere(this.state.selectedOrder.breakdown, {size: 's'}).quantity}
                        onChange={this.onSizeChange.bind(this, 's')}
                        fullWidth />
                      </Col>  
                      <Col xs={1}>
                        <TextField type='number' floatingLabelText='M' ref='sizeM' min={0} fullWidth />
                      </Col>
                      <Col xs={1}>
                        <TextField type='number' floatingLabelText='L' ref='sizeL' min={0} fullWidth />
                      </Col>
                      <Col xs={1}>
                        <TextField type='number' floatingLabelText='XL' ref='sizeXL' min={0} fullWidth />
                      </Col>
                      <Col xs={1}>
                        <TextField type='number' floatingLabelText='2XL' ref='size2XL' min={0} fullWidth />
                      </Col>
                      <Col xs={1}>
                        <TextField type='number' floatingLabelText='3XL' ref='size3XL' min={0} fullWidth />
                      </Col>
                  </Row>

              <FlatButton style={{width: '100%'}} label='Add Order' onClick={() => {this.onAddOrder(); this.onReset(); }} />
              <br />
           </form>
      </div>
    );
  }

}


export default withStyles(OrderForm, s);

Answer 1

我认为你的Jquery没有正确加载，或者你为reactJS添加了jquery库文件不匹配。所以你加载当前版本的jquery库文件

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

reactJS错误“TypeError：无法读取未定义的属性'数量'”

1 个答案: