时间戳

首页 > 解决方案 > 单击以从 React JS 中的字段添加新输入时如何将“添加”按钮固定在顶部

javascript - 单击以从 React JS 中的字段添加新输入时如何将“添加”按钮固定在顶部

问题描述

我在 React 中有一个组件，当单击“添加”按钮时，会创建新的表单字段。但是，当我单击添加按钮时，新表单字段将添加到添加按钮的顶部而不是其下方。

我需要将添加按钮固定在顶部，并创建新的表单字段以堆叠在其他现有表单字段的顶部。我想知道我需要对我的代码进行哪些更改才能实现这一目标。

在此处输入图像描述

  function DynamicFormFields() {
  const [inputList, setInputList] = useState([{ name: "", quantity: "" }]);

  // 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([{ name: "", quantity: "" }, ...inputList]);
  };

  return (
    <>
      <div className="DynamicFormFields">
        <h3>
          <p>Dynamic Form</p>
        </h3>

        {inputList.map((x, i) => {
          // x -> element, i -> index
          return (
            <div className="box">
              <div className="btn-box">
                {inputList.length - 1 === i && (
                  <button onClick={handleAddClick}>Add</button>
                )}
              </div>
              <input
                name="name"
                placeholder="Name"
                value={x.name}
                onChange={(e) => handleInputChange(e, i)}
              />
              <input
                type="number"
                name="quantity"
                // className="ml10"
                min="1"
                max="12"
              ></input>
              {inputList.length !== 1 && (
                <button className="mr10" onClick={() => handleRemoveClick(i)}>
                  Remove
                </button>
              )}
            </div>
          );
        })}
      </div>
    </>
  );
}

标签： javascriptreactjsformsonclick

解决方案

好的，我不确定我是否完全理解您想要的内容，但我很快就做了一些更改（可能包含错误）。这是你想要做的吗？另外我建议将您的输入项制作成小的子组件，这可以帮助您更清楚地看到整体情况。

function DynamicFormFields() {
const [inputList, setInputList] = useState([{ name: "", quantity: "" }]);

// 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([{ name: "", quantity: "" }, ...inputList]);
};

return (
    <>
    <div className="DynamicFormFields">
        <h3>
        <p>Dynamic Form</p>
        </h3>
        <div className="box">
        <div className="btn-box">
            <button onClick={handleAddClick}>Add</button>
        </div>
        <div>
            {inputList.map((x, i) => {
            // x -> element, i -> index
            return (
                <div>
                <input
                    name="name"
                    placeholder="Name"
                    value={x.name}
                    onChange={(e) => handleInputChange(e, i)}
                />
                <input
                    type="number"
                    name="quantity"
                    // className="ml10"
                    min="1"
                    max="12"
                ></input>
                {inputList.length !== 1 && (
                    <button
                    className="mr10"
                    onClick={() => handleRemoveClick(i)}
                    >
                    Remove
                    </button>
                )}
                </div>
            );
            })}
        </div>
        </div>
    </div>
    </>
);
}

这里的主要变化是我将按钮放在循环之外，因为据我所知，它不应该依赖于您的其他输入项。我还将您的输入包装在另一个 div 中，以完全分离按钮和输入。确保只更新需要更新的内容，以免出现意外行为。

推荐阅读