如果我使用formik,如何在嵌套对象中写入正确的值?
P粉410239819
P粉410239819 2023-08-17 16:26:31
[React讨论组]
<p>给定一个与表单对象中的字段名称匹配的字段数组,我试图编写一个嵌套值,但由于某种原因,formik不知道如何编写嵌套值,这仅适用于顶层的值</p> <p>我会在评论中留下codesandbox的链接</p> <pre class="brush:php;toolbar:false;">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) =&gt; { const key = Object.keys(item).at(-1); return ( &lt;div key={idx}&gt; &lt;p&gt;{item[key]?.title}&lt;/p&gt; &lt;input name={key} value={values[key]} onChange={handleChange} placeholder={item[key].title} /&gt; {!isEmpty(item[key]?.fields) &amp;&amp; ( &lt;div style={{ marginLeft: 20 }}&gt; {Object.entries(item[key]?.fields).map(itemsRender)} &lt;/div&gt; )} &lt;/div&gt; ); }; return &lt;&gt;{fields.map(itemsRender)}&lt;/&gt;; }</pre>
P粉410239819
P粉410239819

全部回复(1)
P粉046878197

您需要更新namevalue属性,以包含嵌套字段的完整路径

<input
  name={`${key}.${nestedFieldName}`} // 包含嵌套字段的路径
  value={getIn(values, `${key}.${nestedFieldName}`)} // 使用formik的getIn获取嵌套值
  onChange={handleChange}
  placeholder={fieldObj.title}
/>

您的代码只处理了一层嵌套。
对于更深层次的嵌套,您需要递归地渲染和处理嵌套字段

{Object.entries(item[key]?.fields).map(([nestedFieldName, fieldObj]) => (
  <div style={{ marginLeft: 20 }} key={nestedFieldName}>
    <p>{fieldObj.title}</p>
    <input
      name={`${key}.${nestedFieldName}`}
      value={getIn(values, `${key}.${nestedFieldName}`)}
      onChange={handleChange}
      placeholder={fieldObj.title}
    />
    {fieldObj.fields && (
      <div style={{ marginLeft: 20 }}>
        {Object.entries(fieldObj.fields).map(itemsRender)}
      </div>
    )}
  </div>
))}

最后,不要直接使用handleChange处理嵌套字段,而应该使用Formik的setFieldValue来更新嵌套字段的值。
您可以从表单对象中访问setFieldValue

onChange={(e) => {
  form.setFieldValue(`${key}.${nestedFieldName}`, e.target.value);
}}

codesandbox

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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