我有點擊按鈕時的功能，它將為輸入生成密碼并設定值，但是當我在其中添加欄位name="password"時Form.Item 它無法作業
import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Input, Form, Button } from "antd";
const App = () => {
const [generatePW, setGeneratePW] = useState("");
//Generate Password
const generatePassword = () => {
let length = 10;
let charset =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let retVal = "";
for (let i = 0, n = charset.length; i < length; i) {
retVal = charset.charAt(Math.random() * n);
}
setGeneratePW(retVal);
};
const onFinish = (values) => {
console.log(values);
};
return (
<div>
<Form onFinish={onFinish}>
<Form.Item name="password">
<Input.Password placeholder="Basic usage" value={generatePW} />
</Form.Item>
<Button onClick={generatePassword}>Click</Button>
</Form>
</div>
);
};
export default App;
uj5u.com熱心網友回復：
您需要設定fieldslikeForm的屬性fields={[{ name: "password", value: generatePW }]}才能在外部管理狀態。您的最終代碼將如下所示：
import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Input, Form, Button } from "antd";
const App = () => {
const [generatePW, setGeneratePW] = useState("");
//Generate Password
const generatePassword = () => {
let length = 10;
let charset =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let retVal = "";
for (let i = 0, n = charset.length; i < length; i) {
retVal = charset.charAt(Math.random() * n);
}
setGeneratePW(retVal);
};
const onFinish = (values) => {
console.log(values);
};
return (
<div>
<Form
fields={[{ name: "password", value: generatePW }]}
onFinish={onFinish}
>
<Form.Item name="password">
<Input.Password
value={generatePW}
onChange={(e) => setGeneratePW(e.target.value)}
/>
</Form.Item>
<Button onClick={generatePassword}>Click</Button>
</Form>
</div>
);
};
export default App;
您可以查看此沙箱，了解此解決方案的實時作業示例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/515972.html