GHHub/src/views/products/Detail/PriceCompactInput.jsx

import { useState } from 'react'
import { Input, Space } from 'antd'

const PriceCompactInput = (props) => {
  const { id, value = {}, onChange } = props
  const [numberStart, setNumberStart] = useState(0)
  const [numberEnd, setNumberEnd] = useState(0)
  const [audultPrice, setAudultPrice] = useState(0)
  const [childrenPrice, setChildrenPrice] = useState(0)
  const triggerChange = (changedValue) => {
    onChange?.({
      numberStart,
      numberEnd,
      audultPrice,
      childrenPrice,
      ...value,
      ...changedValue,
    })
  }
  const onNumberStartChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(newNumber)) {
      return
    }
    if (!('numberStart' in value)) {
      setNumberStart(newNumber)
    }
    triggerChange({
      numberStart: newNumber,
    })
  }
  const onNumberEndChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(newNumber)) {
      return
    }
    if (!('numberEnd' in value)) {
      setNumberEnd(newNumber)
    }
    triggerChange({
      numberEnd: newNumber,
    })
  }
  const onAudultPriceChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(newNumber)) {
      return
    }
    if (!('audultPrice' in value)) {
      setAudultPrice(newNumber)
    }
    triggerChange({
      audultPrice: newNumber,
    })
  }
  const onChildrenPriceChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(newNumber)) {
      return
    }
    if (!('childrenPrice' in value)) {
      setChildrenPrice(newNumber)
    }
    triggerChange({
      childrenPrice: newNumber,
    })
  }
  return (
    <Space.Compact id={id}>
      <Input
        type='text'
        value={value.numberStart || numberStart}
        onChange={onNumberStartChange}
        style={{
          width: '20%',
        }}
      />
      <Input
        type='text'
        value={value.numberEnd || numberEnd}
        onChange={onNumberEndChange}
        style={{
          width: '40%',
        }}
        addonBefore='~'
      />
      <Input
        type='text'
        value={value.audultPrice || audultPrice}
        onChange={onAudultPriceChange}
        style={{
          width: '70%',
        }}
        addonBefore='成人价'
      />
      <Input
        type='text'
        value={value.childrenPrice || childrenPrice}
        onChange={onChildrenPriceChange}
        style={{
          width: '70%',
        }}
        addonBefore='儿童价'
      />
    </Space.Compact>
  )
}

export default PriceCompactInput