動態添加和刪除輸入並更新嵌套數組

Question

當用戶單擊加號時，如何在反應 js 的嵌套數組中動態添加新輸入字段到 object？ 動態添加和刪除輸入

我想在下面分享的 handlepropositionTimeAddClick 和 handlepropositionTimeRemoveClick 方法中動態添加和刪除 propositionTimes。 我怎樣才能做到這一點？ 我想對 propositionResponseTimes 和分析器做同樣的事情。

const [issue, setIssue] = useState({
    
    firstResponseDuration: "",
    firstResponseOvertime: "",
    solutionDuration: "",
    solutionOvertime: "",
    propositionTimes: [{
     
      propositionTime: ""
    }],
    propositionResponseTimes: [{  propositionResponseTime: "" }],
    analyzers: [{  analyzerName: "", analyzerHuaweiId: "" }],
  });

  const { firstResponseDuration, firstResponseOvertime,solutionDuration, solutionOvertime, propositionTimes, propositionResponseTimes, analyzers } = issue;
.
.
.

 // handle click event of the Remove button
  const handlepropositionTimeRemoveClick = index => {
  
  };

  // handle click event of the Add button
  const handlepropositionTimeAddClick = (i) => {
   
  };
.
.
.
   {
            issue.propositionTimes.map((item, i) => {
              return (
                <div key={i} className="form-group" >
                  <label>
                    Proposition Time
                  </label>
                  <TextField
                    type="datetime-local"
                    placeholder="Enter propositionTime"
                    name="propositionTime"
                    format="dd-MM-yyyy HH:mm"
                    value={item.propositionTime}
                    onChange={e => onInputPropositionTimes(e, i)}
                  />

                  <div>
                    {issue.propositionTimes.length !== 1 && <button
                      className="mr10"
                      onClick={() => handlepropositionTimeRemoveClick(i)}>Remove</button>}
                    {issue.propositionTimes.length - 1 === i && <button onClick={handlepropositionTimeAddClick(i)}>Add</button>}
                  </div>


                </div>
              )
            })
          }

Answer 1

  // handle click event of the Remove button
  const handlepropositionTimeRemoveClick = index => {
    const issueObj = {...issue};
    const filteredIssue = issue.propositionTimes.filter((item, ind) => ind !== index);
    issueObj.propositionTimes = filteredIssue;
    setIssue(issueObj);
  };

  // handle click event of the Add button
  const handlepropositionTimeAddClick = (i) => {
    const issueObj = {...issue};    
    const newObj = {
      propositionTime: ""   // Code to add new propositionTime
    }
    issueObj.propositionTimes.push(newObj)
    setIssue(issueObj);
  };

同樣在你的handlepropositionTimeAddClick function，不要直接調用。 只需傳遞參考

{issue.propositionTimes.length - 1 === i && <button onClick={() => handlepropositionTimeAddClick(i)}>Add</button>}