Question

我尝试从后端获取值，并将结果附加到输入字段值，但不会更新。

目前，我使用的是Ant Design Forms，如果将输入字段移出Form，它就会起作用。

import { version, Input, Form } from "antd";

function View() {
      const [LegalName, setLegalName] = useState("");

    useEffect(() => {
        axios
          .get("/afterlogin/OrgFullPictureGet/3", config)
          .then(response => {
            setLegalName(response.data.name);

          })
          .catch(error => {
            // console.log(error.response.data.errors);
          });
      }, []);

      const onFinish = values => {
        //onFinish logic here
        console.log(values);
      };
      return (
        <div className="App">
          <Form name="nest-messages" onFinish={onFinish}>
            <Form.Item
              name={["user", "LegalName"]}
              label={<span>Legal Name</span>}

            >
              <Input
                placeholder={"Your business legal name"}
                value={LegalName}
                onChange={e => setLegalName(e.target.value)}
              />
            </Form.Item>
          </Form>


        </div>
      );
    }

该值未添加到输入字段

Answer 1

在merge上使用name字段时，这意味着Form组件将随后处理该字段上的Form.Item和value。您不需要添加它们。因此，如果您需要添加handleChange和value，请从handleChange移除name道具，如您所见here

但是，在大多数情况下，您需要使用它们。在这种情况下，替代方法是使用Form.Item设置所需的值：

form.setFieldValues

useForm & setFieldValue Demo docs

Stackblitz Demo

蚂蚁设计输入组件未更新值

1 个答案: