youzan / zent

A collection of essential UI components written with React.
https://youzan.github.io/zent
MIT License
2.25k stars 378 forks source link

修复 NumberInput 渲染死循环的问题 #1994

Closed cpylua closed 1 year ago

cpylua commented 1 year ago

// 输入 1.289
function Demo1() {
  const [value, setValue] = React.useState("1.00");

  return <NumberInput value={value} onChange={setValue} decimal={2} />;
}

function Demo2() {
  const [value, setValue] = React.useState(0);
  const [datasets, setDatasets] = React.useState([
    {
      id: 1,
      name: "test",
      value: 129,
    },
  ]);

  return (
    <>
      <NumberInput
        placeholder=""
        width={120}
        value={Number(value) / 100}
        max={100}
        min={0}
        addonAfter="%"
        decimal={2}
        onChange={(val) => {
          setValue(val);
        }}
      />
      <NumberInput
        placeholder=""
        width={120}
        value={Number(datasets[0].value) / 100}
        max={100}
        min={0}
        addonAfter="%"
        decimal={2}
        onChange={(val) => {
          console.log("onChange");
          const newData = [...datasets];
          newData[0].value = Number(val) * 100;
          setDatasets(newData);
        }}
      />
    </>
  );
}