import React, { useState } from "react";
import { InputNumber } from "@tencent/tea-component";

export default function InputNumberExample() {
  const [min, setMin] = useState(0);
  const [max, setMax] = useState(10);
  const [step, setStep] = useState(1);
  const [value, setValue] = useState(0);

  return (
    <>
      <section>
        <InputNumber
          value={value}
          onChange={value => {
            console.log(value);
            setValue(value);
          }}
          min={min}
          max={max}
          step={step}
          unit="台"
        />
      </section>
      <hr />
      <section>
        <p>变动下述属性对上方输入框进行调整：</p>
        <br />
        <label>
          最小值：
          <InputNumber
            value={min}
            max={max}
            onChange={value => setMin(value)}
          />
        </label>
        <label style={{ marginLeft: 10 }}>
          最大值：
          <InputNumber
            value={max}
            min={min}
            onChange={value => setMax(value)}
          />
        </label>
        <label style={{ marginLeft: 10 }}>
          步长：
          <InputNumber
            value={step}
            min={0}
            onChange={value => setStep(value)}
          />
        </label>
      </section>
    </>
  );
}