can't set field value Input antd javascript/reactjs

Question

I have function when click button it will generate password and set value for Input, but when i add field name="password" in the Form.Item it can't work

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;

Please read Something on my web site doesn't work. Can I just paste a link to it?. Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a minimal reproducible example and put it in the question itself instead. Stackoverflow does support inline live demos — Quentin
– Quentin, Commented Oct 15, 2022 at 7:42
sorry for my ignorance, i have change the question, pls help me — phu.duongquoc
– phu.duongquoc, Commented Oct 15, 2022 at 7:59

Ahmet Emre Kilinc · Accepted Answer · 2024-02-25 12:14:44Z

You need to set fields prop of Form like fields={[{ name: "password", value: generatePW }]} in order to manage the state externally. Your final code will be like this:

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;

You can take a look at this StackBlitz for a live working example of this solution.

Collectives™ on Stack Overflow

can't set field value Input antd javascript/reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related