React中如何处理多输入表单以创建嵌套结构的state属性

核心修改点 #

1. 修正state初始结构，完全对齐你需要的目标数据结构
2. 重写状态更新方法，保证嵌套层级正确，parametri数组内的元素和内嵌的dbQueryParam属性更新路径正确
3. 修正所有输入框的value绑定，对应到state的正确路径
4. 提交前增加类型转换逻辑，把数字类的字段从字符串转成数值类型，符合你给的示例结构

修改后的逻辑代码 #

import React, { useState } from 'react';
import "./QueryToParameter.css";

// 初始state和目标结构完全对齐
const [parameters, setParameter] = useState({
  id: '',
  opis: '',
  parametri: [
    {
      id: '',
      ime: '',
      opis: '',
      duzina: '',
      dbQueryParam: {
        id: '',
        name: '',
        opis: '',
        tip: ''
      },
      vrednost: ''
    }
  ],
  requestType: '',
  oznaka: ''
});

// 根层级query字段更新
const onQueryChange = (e) => {
  const { name, value } = e.target;
  setParameter(prevState => ({
    ...prevState,
    [name]: value,
  }));
}

// parametri数组内基础字段更新，当前默认只有1个参数项，操作索引0的元素
const onParameterChange = (e) => {
  const { name, value } = e.target;
  setParameter(prevState => ({
    ...prevState,
    parametri: prevState.parametri.map((item, index) => {
      if (index === 0) {
        return { ...item, [name]: value }
      }
      return item
    })
  }));
}

// dbQueryParam嵌套字段更新
const onDbParameterChange = (e) => {
  const { name, value } = e.target;
  setParameter(prevState => ({
    ...prevState,
    parametri: prevState.parametri.map((item, index) => {
      if (index === 0) {
        return {
          ...item,
          dbQueryParam: { ...item.dbQueryParam, [name]: value }
        }
      }
      return item
    })
  }));
}

// parametri数组内vrednost字段更新
const onVrednostChange = (e) => {
  const { name, value } = e.target;
  setParameter(prevState => ({
    ...prevState,
    parametri: prevState.parametri.map((item, index) => {
      if (index === 0) {
        return { ...item, [name]: value }
      }
      return item
    })
  }));
}

const onReport = () => {
  // 转换数字类型字段，符合目标结构的类型要求
  const formattedParams = {
    ...parameters,
    id: Number(parameters.id),
    parametri: parameters.parametri.map(item => ({
      ...item,
      id: Number(item.id),
      duzina: Number(item.duzina),
      dbQueryParam: {
        ...item.dbQueryParam,
        id: Number(item.dbQueryParam.id)
      },
      vrednost: Number(item.vrednost)
    }))
  }
  console.log(formattedParams);
  // AuthService.getReport(formattedParams).then((res) => {
  //     console.log(res.data);
  // });
}

修改后的表单代码 #

return (
  <div>
    <div className="col-lg-6 mx-auto">
      <form>
        <div className="col-12">
          <label htmlFor="query-id" className="form-label">Query id</label>
          <input type="text" className="form-control" name="id" value={parameters.id} onChange={onQueryChange} />
        </div>
        <div className="col-12">
          <label htmlFor="query-opis" className="form-label">Query opis</label>
          <input type="text" className="form-control" name="opis"  value={parameters.opis} onChange={onQueryChange} />
        </div>
        <ul>
          <div className="col-12">
            <label htmlFor="param-id" className="form-label">Parameter id</label>
            <input type="text" className="form-control" name="id" value={parameters.parametri[0].id} onChange={onParameterChange} />
          </div>
          <div className="col-12">
            <label htmlFor="param-ime" className="form-label">Parameter ime</label>
            <input type="text" className="form-control" name="ime" value={parameters.parametri[0].ime} onChange={onParameterChange} />
          </div>
          <div className="col-12">
            <label htmlFor="param-opis" className="form-label">Parameter opis</label>
            <input type="text" className="form-control" name="opis" value={parameters.parametri[0].opis} onChange={onParameterChange} />
          </div>
          <div className="col-12">
            <label htmlFor="param-duzina" className="form-label">Parameter duzina</label>
            <input type="text" className="form-control" name="duzina" value={parameters.parametri[0].duzina} onChange={onParameterChange} />
          </div>
          <ul>
            <div className="col-12">
              <label htmlFor="db-id" className="form-label">DB Parameter id</label>
              <input type="text" className="form-control" name="id"  value={parameters.parametri[0].dbQueryParam.id} onChange={onDbParameterChange} />
            </div>
            <div className="col-12">
              <label htmlFor="db-name" className="form-label">DB Parameter name</label>
              <input type="text" className="form-control" name="name"  value={parameters.parametri[0].dbQueryParam.name} onChange={onDbParameterChange} />
            </div>
            <div className="col-12">
              <label htmlFor="db-opis" className="form-label">DB Parameter opis</label>
              <input type="text" className="form-control" name="opis"  value={parameters.parametri[0].dbQueryParam.opis} onChange={onDbParameterChange} />
            </div>
            <div className="col-12">
              <label htmlFor="db-tip" className="form-label">DB Parameter tip</label>
              <input type="text" className="form-control" name="tip" value={parameters.parametri[0].dbQueryParam.tip} onChange={onDbParameterChange} />
            </div>
          </ul>
          <div className="col-12">
            <label htmlFor="vrednost" className="form-label">Vrednost</label>
            <input type="text" className="form-control" name="vrednost"  value={parameters.parametri[0].vrednost} onChange={onVrednostChange} />
          </div>
        </ul>
        <div className="col-12">
          <label htmlFor="requestType" className="form-label">Query requestType</label>
          <input type="text" className="form-control" name="requestType"  value={parameters.requestType} onChange={onQueryChange} />
        </div>
        <div className="col-12">
          <label htmlFor="oznaka" className="form-label">Query oznaka</label>
          <input type="text" className="form-control" name="oznaka" value={parameters.oznaka} onChange={onQueryChange} />
        </div>
      </form>
      <button type="button" className="btn btn-primary mt-4 mb-4" onClick={onReport}>Send</button>
    </div>
  </div>
)

扩展说明 #

如果后续需要支持多个parametri参数项，只需要新增一个添加按钮，点击时往parametri数组里push符合结构的空对象，更新状态时根据当前操作的参数项索引动态修改即可。

内容的提问来源于stack exchange，提问作者Nikola Čeković