为了账号安全,请及时绑定邮箱和手机立即绑定

如何在 React 中根据数据创建对象?

如何在 React 中根据数据创建对象?

浮云间 2022-09-23 21:48:01

根据下面的代码,如何在 React 状态(对于函数组件)中创建对象模型?


<div class="form-row">

    <label>Input 1</label>

    <input id="1" />

</div>


<div class="form-row">

    <label>Input 2</label>

    <input id="2" />

</div>


<div class="form-row">

    <label>Input 3</label>

    <input id="3" />

</div>


<div class="form-row">

    <label>Input 4</label>

    <input id="4" />

</div>

const dataToPost = [

        ...document.querySelectorAll("div.form-row"),

    ].map((f) => {

        let obj = {};

        f.querySelectorAll("input").forEach(

            (item) => (

                (obj["id"] = item.id), (obj["value"] = item.value || "")

            )

        );

        return obj;

    });

这将输出我想要的结果...


"dataToPost": [

    {

        "id": "1",

        "value": "input one value"

    },

    {

        "id": "2",

        "value": "input two value"

    },

    {

        "id": "3",

        "value": "input three value"

    },

    {

        "id": "4",

        "value": "input four value"

    }

]


那么,是否可以对每个输入使用 on change 事件来更新其状态对象,因为它需要是一个函数组件?


查看完整描述

1 回答

?
子衿沉夜

TA贡献1506条经验 获得超3个赞

您需要创建自定义挂钩以将表单的状态保持在所需的格式,并在事件中更新表单状态onChange


请按照以下步骤操作:


转换


<div class="form-row">

    <label>Input 1</label>

    <input id="1" />

</div>

将表示单个输入元素及其标签的组件中。


创建一个将保留窗体状态的自定义挂钩


import { useState, useCallback } from "react";


function useForm() {

  const [data, setData] = useState([

    { id: 1, value: "" },

    { id: 2, value: "" },

    { id: 3, value: "" },

    { id: 4, value: "" }

  ]);


  const updateForm = useCallback(

    ({ target }) => {

        const arr = [...data];

        const obj = arr.find(o => o.id === Number(target.name));


        obj.value = target.value;

        setData(arr);

    },

    []

  );


  return [data, updateForm];

}


export default useForm;

创建将呈现所有组件的组件。此组件将使用在步骤 2 中创建的挂钩。在此组件中,我们将循环访问表单状态并呈现各个组件,并将适当的 props 传递给元素,并且还会传递事件处理程序,该处理程序将在任何输入更改时更新表单状态。FormInputFormuseFormInputInputonChange


import React from "react";

import useForm from "./useForm";

import Input from './Input';


function Form() {

   const [data, setData] = useForm();


   return (

    <>

      {

        data.map((input, idx) => (

           <Input

              key={idx}

              type="text"

              value={input.value}

              label={`Input ${++idx}`}

              name={input.id}

              setValue={setData}

           />

        ))

       }

    </>

  );

}


export default Form;

这是上述步骤的工作演示。


附注钩子,并已用于优化。这可以防止在任何组件上触发事件时对所有组件进行不必要的重新呈现useCallbackReact.memoInputonChangeInput


查看完整回答
反对 回复 3天前
  • 1 回答
  • 0 关注
  • 6 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信