zoukankan      html  css  js  c++  java
  • React 根据条件自动计算

    1.输入框

                <Item {...formItemProps} label="留房日期">
                  {getFieldDecorator('date', {
                    rules: [{ required: true, message: '请选择留房日期!' }],
                  })
                  (<RangePicker style={{  '66%', marginRight: '4%' }} value={date} onChange={this.setTotalPrice} />)
                  }
                </Item>
                <Item {...formItemProps} label="单价">
                  {getFieldDecorator('unitPrice', {
                    rules: [{ required: true, message: '请输入单价' }],
                  })(<Input placeholder="请输入" value={unitPrice} onChange={this.setTotalPrice} />)} 
                </Item>
                <Item {...formItemProps} label="间数">
                  {getFieldDecorator('roomNum')(<InputNumber value={roomNum} onChange={this.setTotalPrice} />)}
                </Item>

    2.计算函数

      /**
       * 计算总价:保留几位小数
       * 总价=单价[unitPrice]*留芳天数[date]*间数[roomNum]
       * 留房天数=留房天数:(留房结束时间-留房开始时间)+1
       */
      setTotalPrice = (e) => {
        const {
          form:{
            setFieldsValue
          }
        } = this.props
        let { 
          unitPrice,
          date,
          roomNum,
        } = this.state
    
        if(e.target){
          if(e.target.id === 'unitPrice'){
            unitPrice = e.target.value
          }else{
            roomNum = e.target.value
          }
          this.setState({
            [e.target.id]: e.target.value
          })
        }else if(typeof(e) === 'number'){
          roomNum = e
          this.setState({
            roomNum: e
          })
        }else{
          const dateData = [e[0].format('YYYY-MM-DD'), e[1].format('YYYY-MM-DD')]
          date = dateData
          this.setState({
            date: dateData
          })
        }
    
        if(unitPrice === '' || unitPrice === null || date === [] || date === null || roomNum === '' || roomNum === null) {
          this.setState({totalPrice: ''})
          setFieldsValue({ totalPrice: '' })
          return
        }
    
        const roomNumInt = parseInt(roomNum, 10)
        const unitPriceFloat = parseFloat(unitPrice)
        const leaveDayNum = getAllDate(date[0], date[1]).length
        const totalPrices = (roomNumInt*unitPriceFloat*leaveDayNum).toFixed(2).toString()
        this.setState({ totalPrice: totalPrices})
        setFieldsValue({ totalPrice: totalPrices })
      }
  • 相关阅读:
    Oracle必须要启动的服务
    Oracle_Kill_Session_终极篇
    oracle 修改用户密码
    ORA-01000-超出打开游标的最大数(解决及原因)
    ORA-00600 内部错误代码, 参数 [19004]
    done 多米诺pizza oa 考了spring boot编程
    ebay mettle印度网站oa 切换屏幕就报警
    done摩根史丹利m&t oa
    done peapod 不被太尊重的不面了
    有一点题 virtusa 空口说代码的电面
  • 原文地址:https://www.cnblogs.com/Cailf/p/11400425.html
Copyright © 2011-2022 走看看