单击以在 React JS 中添加来自字段的新输入时，如何将 "Add" 按钮固定在顶部

Question

我在 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>
    </>
  );
}

Answer 1

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

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 中，以将按钮和输入完全分开。确保只更新需要更新的内容，以免发生意外行为。

单击以在 React JS 中添加来自字段的新输入时，如何将 "Add" 按钮固定在顶部

How to keep "Add" button fixed at the top when clicked to add a new input from field in React JS

javascript

forms

onclick

reactjs