Ant 反應中的設計形式

Question

幫幫我，setvalue 不起作用。 但是當我刪除 Form,Item 中的 name 屬性時它是否正常工作？ 有沒有辦法不刪除名稱屬性並仍然正常工作？ 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

我認為你的表單工作不好，因為需要為 onFinish function 發送一個表單，之前在輸入中你可以為它格式化值，顯然你需要一個提交按鈕

讓我分享我的觀點：

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>

為什么你需要這個 function onFinish？ 因為如果一切正常，沒有錯誤等，這將被執行