如果我使用formik,如何在嵌套对象中写入正确的值?
P粉410239819
P粉410239819 2023-08-17 16:26:31
[React讨论组]

给定一个与表单对象中的字段名称匹配的字段数组,我试图编写一个嵌套值,但由于某种原因,formik不知道如何编写嵌套值,这仅适用于顶层的值

我会在评论中留下codesandbox的链接

export default function App() {
  const form = useFormik({
    initialValues: {
      name: "",
      login: "",
      about: {
        age: "",
        rank: "",
        car: {
          name: "",
          years: ""
        }
      }
    }
  });

  const fields = [
    {
      name: { title: "Your name", fields: {} },
      login: { title: "Your login", fields: {} },
      about: {
        title: "About",
        fields: {
          age: { title: "Your age", fields: {} },
          rank: { title: "Your rank", fields: {} },
          car: {
            title: "Your car",
            fields: {
              name: { title: "Car name", fields: {} },
              years: { title: "Car years", fields: {} }
            }
          }
        }
      }
    }
  ];
  const { values, handleChange } = form;

  console.log("VALUES", values);

  const itemsRender = (item, idx) => {
    const key = Object.keys(item).at(-1);
    return (
      <div key={idx}>
        <p>{item[key]?.title}</p>
        <input
          name={key}
          value={values[key]}
          onChange={handleChange}
          placeholder={item[key].title}
        />

        {!isEmpty(item[key]?.fields) && (
          <div style={{ marginLeft: 20 }}>
            {Object.entries(item[key]?.fields).map(itemsRender)}
          </div>
        )}
      </div>
    );
  };

  return <>{fields.map(itemsRender)}</>;
}
P粉410239819
P粉410239819

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号