将行作为对象添加到键并使用反应发送到后端

Question

我一直在尝试添加新行，当我单击行底部的保存按钮时。应将诸如 order、input1、input2、checkbox（如果选中）之类的值作为每个单独的对象添加到“queryparam”内的“overallData”中。所以，如果我创建 3 个新行，那么它应该将 3 个对象添加到“overallData”数组并发送到 axios 帖子。我试图将它推入一个新数组并尝试使用 map 获取它，但它不起作用。有什么办法吗？

https://codesandbox.io/s/add-remove-items-p42xr?file=/src/App.js:817-827

Answer 1

我在这段代码中实现了你想要的所有逻辑。现在它就像一个魅力。动态添加新的表单域。为他们提供价值。当您单击保存按钮时，仅提交选中的那些。有几点要提：

1).为了满足程序要求，我将新表单的默认值改为{ orderno: 0, inputValue1: "", inputValue2: "", checked: false }。

2).我添加了一个新状态orderNumber 来有效控制订单号

3).当您单击保存按钮时，未选中的表单将被过滤掉。

import React, { useState } from "react";

const App = () => {

  const [formValues, setFormValues] = useState([
    { orderno: 0, inputValue1: "", inputValue2: "", checked: false }
  ]);

  // control order number in a state to make sure
  // that it does not get messed when you remove
  // an indice from formValues
  // !! default was 0. so set it to 1
  const [orderNumber, setOrderNumber] = useState(1)


  const addFormFields = () => {
    setFormValues(prevState => [
      ...prevState,
      {
        orderno: orderNumber,
        inputValue1: '', 
        inputValue2: '', 
        checked: false 
      }
    ]);
    // increment order number
    setOrderNumber(prev => prev+1)
  };


  const removeFormFields = (i) => {
    let newFormValues = [...formValues];
    newFormValues.splice(i, 1);

    setFormValues(newFormValues);

    // decrement order number
    setOrderNumber(prev => prev-1)
  };


  const onChangeFieldValue = (index, key, value) => {
    setFormValues(prevState => {
      let copyState = [...prevState]

      if(value === 'toggle') // toggle 'checked' key
        copyState[index][key] = !copyState[index][key]
      else
        copyState[index][key] = value

      return copyState
    })
  }

  const saveFields = (e) => {
    const queryparam = {
      data: "xxx",
      DbData: "xxx",
      SQlData: "xxx", // only checked ones
      overallData: formValues.filter(el => el.checked)
    };
    console.log(queryparam)
    //axios.post('..',queryparam)
  };
  return (
    <>
      {formValues.length <= 4
        ? formValues.map((element, index) => (
            <div className="form-inline" key={index}>
              <label>{index + 1}</label>

              <input
                type="text"
                value={element.inputVal1}
                onChange={(e) => onChangeFieldValue(index, 'inputValue1', e.target.value)}
              />
              <input
                type="text"
                value={element.inputVal2}
                onChange={(e) => onChangeFieldValue(index, 'inputValue2', e.target.value)}
              />
              <input 
                type="checkbox"
                checked={element.checked}
                onChange={(e) => onChangeFieldValue(index, 'checked', 'toggle')}/>
              <button
                className="button add"
                type="button"
                onClick={() => addFormFields()}
              >
                Add
              </button>

              <button
                type="button"
                className="button remove"
                onClick={() => removeFormFields(index)}
              >
                Remove
              </button>
            </div>
          ))
        : ""}
      <button
        type="button"
        className="button remove"
        onClick={(e) => saveFields(e)}
      >
        Save
      </button>
      <button
        type="button"
        className="button remove"
        onClick={(e) => cancelFields(e)}
      >
        cancel
      </button>
    </>
  );
};

export default App;