使用 react 根据后端响应更新复选框值

Question

我正在尝试执行编辑功能，我将从后端获取数据。因此，如果家属的值为“1,2”，则应选中复选框。如果需要，我应该能够取消选中该复选框并再次发送该值。在下面的一个中，当我们单击第二行的添加时，我正在检查复选框的值是否为 2（行：79）并且它显示为已选中。问题是当我无法取消选择它并再次发送时。

https://codesandbox.io/s/naughty-rhodes-i2sn9?file=/src/App.js

Answer 1

我稍微修改了你的代码， dependents state 无法处理所有表单值的依赖，所以我在表单值对象中添加了一个依赖对象， 我已经测试过它并且它正在工作， 只修改了复选框的代码和逻辑，所有其他代码都与您的相似

https://codesandbox.io/s/react-fiddle-forked-ubcz4

试试这个

import React, { useState } from "react";

const App = () => {
  const [formValues, setFormValues] = useState([
    { orderno: 1, inputValue1: "", inputValue2: "", dependentParams: [] }
  ]);
  const [dependents, setDependents] = useState("");

  // 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 = () => {
    let dependentString = [];
    formValues.map((d, i) => {
      dependentString.push(i + 1);
    });
    setFormValues((prevState) => [
      ...prevState,
      {
        orderno: orderNumber + 1,
        inputValue1: "",
        inputValue2: "",
        dependentParams: dependentString.length ? dependentString : []
      }
    ]);
    // 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];
      copyState[index][key] = value;
      return copyState;
    });
  };
  const onchangeCheckbox = (e, orderNo, index) => {
    setFormValues((prevState) => {
      let copyState = [...prevState];
      let dependentParams = [...copyState[orderNo].dependentParams];
      console.log(index, dependentParams);
      if (dependentParams.indexOf(index) !== -1) {
        dependentParams.splice(dependentParams.indexOf(index), 1);
      } else {
        dependentParams.push(index);
      }
      copyState[orderNo].dependentParams = dependentParams;
      return copyState;
    });
  };

  const saveFields = (e) => {
    const queryparam = {
      data: "xxx",
      DbData: "xxx",
      SQlData: "xxx", // only checked ones
      overallData: { formValues : formValues.map(d => ({...d, dependentParams:d.dependentParams.join(',')})) }
    };
    console.log(queryparam, "hhhhhhh");
  };

  const rows = (ele, orderno) => {
    let rowNos = [];
    for (let i = 0; i < orderno; i++) {
      rowNos.push(
        <>
          <input
            type="checkbox"
            value={orderno - i}
            id={orderno - i}
            checked={ele.dependentParams.indexOf(orderno - i) !== -1}
            onChange={(e) => {
              onchangeCheckbox(e, orderno, orderno - i);
            }}
          />
          Params {orderno - i}
        </>
      );
    }
    return rowNos;
  };
  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)
                }
              />
              {rows(element, index)}

              <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;

Answer 2

将复选框选中的属性条件更改为

 checked={orderno === 1 ? true : false}

再试一次