Ant 反应中的设计形式

Question

help me, setvalue doesn't work. but when I remove the name attribute in Form,Item it works normally? is there any way without removing the name attribute and still working properly? antd https://codesandbox.io/s/21jbmg?file=/demo.js

import { Form, Input } from "antd";
import React, { useState } from "react";

const App = () => {
 const [valuess, setValue] = useState("nguyen");
 const onInputChange = (e) => {
   setValue(e.target.value);
   setValue(FormatName);
};
function FormatName(str) {
  return str
   .normalize("NFD")
   .replace(/[\u0300-\u036f]/g, "")
   .replace(/[đĐ]/g, (m) => (m === "đ" ? "d" : "D"))
   .toUpperCase();
}
 return (
  <Form name="basic">
    <Form.Item name="Username" label="Username">
      <Input onChange={onInputChange} value={valuess} />
    </Form.Item>
  </Form>
 );
};
export default App;

Answer 1

i think your form is working bad, because a form need to be send for onFinish function, and previously in the input you can formatted the value for it, obviously you need a submit button

let me share my obs:

function FormatName(str) {
  return str
   .normalize("NFD")
   .replace(/[\u0300-\u036f]/g, "")
   .replace(/[đĐ]/g, (m) => (m === "đ" ? "d" : "D"))
   .toUpperCase();
}

<Form name="basic"   onFinish={handleFinish}>
    <Form.Item name="Username" label="Username">
      <Input onChange={onInputChange} normalize={(value) => FormatName(value)} value={valuess} />
    </Form.Item>
<Button htmlType="submit" size="middle" type="primary">
            {t('common:onboarding.continue')}
          </Button>
  </Form>

why do you need this function onFinish? because this will be executed if everything is ok, without errors and so on