如何僅在此反應表單上創建單個div

我有一個使用陣列映射方法創建的表單。我只想在 onClick 添加時添加一個框一或框二的一個 div，但現在它同時添加了兩個 div。………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ......................如何在這個反應表單上只創建單個 div

  const [inputList, setInputList] = useState([{ Date: "", File: "" }]);

// handle input change
const handleInputChange = (e, index) => {
  const { name, value } = e.target;
  const list = [...inputList];
  list[index][name] = value;
  setInputList(list);
};

// handle click event of the Remove button
const handleRemoveClick = index => {
  const list = [...inputList];
  list.splice(index, 1);
  setInputList(list);
};

// handle click event of the Add button
const handleAddClick = () => {
  setInputList([...inputList, { Date: "",File: "" }]);
};
<form >
  
        {inputList.map((x, i) => {
      return (
          <>
        <div className="box-one">
          <input
            name="firstName"
            placeholder="Enter First Name"
            type="date"
            value={x.firstName}
            onChange={e => handleInputChange(e, i)}
          />
          <input
            className="ml10"
            name="lastName"
            placeholder="Enter Last Name"
            type="file"
            value={x.lastName}
            onChange={e => handleInputChange(e, i)}
          />
          {/* <div className="btn-box">
            {inputList.length !== 1 && <button
              className="mr10"
              onClick={() => handleRemoveClick(i)}>Remove</button>}
            {inputList.length - 1 === i && <button onClick={handleAddClick}>Add</button>}
          </div> */}
        </div>
        <div className="box-two">
        <input
          name="firstName"
          placeholder="Enter First Name"
          type="date"
          value={x.firstName}
          onChange={e => handleInputChange(e, i)}
        />
        <input
          className="ml10"
          name="lastName"
          placeholder="Enter Last Name"
          type="file"
          value={x.lastName}
          onChange={e => handleInputChange(e, i)}
        />
        <div className="btn-box">
          {inputList.length !== 1 && <button
            className="mr10"
            onClick={() => handleRemoveClick(i)}>Remove</button>}
          {inputList.length - 1 === i && <button onClick={handleAddClick}>Add</button>}
        </div>
      </div>
      </>
      );
    })}
        </form>

uj5u.com熱心網友回復：

試試這個

const [inputList, setInputList] = useState([
    { Date: "", File: "" },
    { Date: "", File: "" },
  ]);

  // handle input change
  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
  };

  // handle click event of the Remove button
  const handleRemoveClick = (index) => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
  };

  // handle click event of the Add button
  const handleAddClick = () => {
    setInputList([...inputList, { Date: "", File: "" }]);
  };
  return (
    <form>
      <>
        {inputList.map((x, i) => {
          return (
            <>
              <div className="box-one">
                <input
                  name="firstName"
                  placeholder="Enter First Name"
                  type="date"
                  value={x.firstName}
                  onChange={(e) => handleInputChange(e, i)}
                />
                <input
                  className="ml10"
                  name="lastName"
                  placeholder="Enter Last Name"
                  type="file"
                  value={x.lastName}
                  onChange={(e) => handleInputChange(e, i)}
                />
              </div>
              <div className="btn-box">
                {inputList.length !== 1 && (
                  <button className="mr10" onClick={() => handleRemoveClick(i)}>
                    Remove
                  </button>
                )}
                {inputList.length - 1 === i && (
                  <button onClick={handleAddClick}>Add</button>
                )}
              </div>
            </>
          );
        })}
      </>
    </form>
  );

uj5u.com熱心網友回復：

根據您的回傳邏輯，inputList 的每個專案將呈現兩個 div（框一和框二）。如果您想在單擊“添加”后只添加一個輸入，您可以洗掉其中一個框。

標籤：javascript 数组 反应 形式 下一个.js

上一篇：將陣列與tableView部分中的核心資料分開

下一篇：ExcelVBA從不相鄰的表列創建多維陣列