ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

🧐[问题] ProFrom无法绑定结构化数据 #8278

Closed gaojianzhuang closed 1 month ago

gaojianzhuang commented 1 month ago

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

Ant-design: "@ant-design/pro-components": "^1.1.18",

💻 示例代码

import React, { useState } from 'react';
import './style.less';
import {
  PageContainer,
  ProCard,
  ProForm,
  ProFormText, 
  ProFormTextArea, 
  ProFormRadio, 
  ProFormSelect

} from '@ant-design/pro-components';

const BannerPreview: React.FC = () => {
const [currentValue, setCurrentValue] = useState({ 
    user: { 
      name: "", 
      gender: "male", 
      age: 12 
    }
  });

return (
<ProForm
          initialValues={currentValue}
          onValuesChange={(changedValues, values) => { 
          console.log("values:", values);
          console.log("changedValues:", changedValues);
          console.log("currentValue:", currentValue);
          console.log("newValue:", {
              ...currentValue,
              ...{
                ...changedValues,
              },
            });
            setCurrentValue({
              ...currentValue,
              ...{
                ...changedValues,
              },
            });
        }}>
          <ProFormText
            name="user.name"
            label="用户名"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          />
          <ProFormSelect
            name="user.gender"
            label="性别"
            options={[
              { label: '男', value: 'male' },
              { label: '女', value: 'female' },
            ]}
            rules={[
              {
                required: true,
                message: '请选择性别',
              },
            ]}
          />
          <ProFormText
            name="user.age"
            label="年龄"
            rules={[
              {
                required: true,
                message: '请输入年龄',
              },
            ]}
          />
        </ProForm>
);

}

当我们修改名称,发现name字段无法自动更新到user.name字段上。 image

期待结果:当用户修改name能够自动绑定到结构对象user.name上

请问哪位大佬可以帮忙解释一下?多谢

gaojianzhuang commented 1 month ago

好像解决了,name改成["user", "name"]这种形式就可以正确识别成对象。