Reactjs 使用可滚动容器添加/删除输入字段

Question

我是一名新的 ReactJS 开发人员，希望创建一个包含输入字段的容器，您可以在其中添加/删除新字段。我希望所有这些都位于可滚动容器中，但相反，我的代码添加了新输入，但移动了页面的其余部分，并且不保留在容器中。下面是react和css。css 还有一些我稍后将包含的字段

反应

import React, { useState } from "react";

import './Dropdown.css'

function Dropdown() {

  const [inputList, setInputList] = useState([{ courseName: "", courseRating: "" }]);

  

  // handle input change

  const andleInputChange = (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, { courseName: "", courseRating: "" }]);

  };

  return (

    <div className="base-container-drop">

      <div className="content-drop">

      {inputList.map((x, i) => {

        return (

          <div className="container-for-drop">

              <div className="form-drop">

                <div className="form-group-drop">

                  <label className="label-drop" htmlFor="courseName"></label>

                  <input className="input-drop"

                    name="courseName"

                    placeholder="Course Name"

                    value={x.firstName}

                    onChange={e => handleInputChange(e, i)}

                  />

                </div>

                <div className="form-group-drop-rating">

                    <label className="label-drop" htmlFor="courseRating"></label>

                    <input className="input-drop"

                    type="number"

                    name="courseRating"

                    placeholder="0"

                    max='10'

                    min='0'

                    value={x.lastName}

                    onChange={e => handleInputChange(e, i)}

                  />

                </div>

        );

      })}

      </div>

    </div>

  );

}

Answer 1

我对你进行了一些扩展并创建了一个ScrollableContainer. 我们的想法是使其模块化且可重复使用，这样您就可以将任何东西放入其中，无论是您的Dropdown还是其他任何东西。默认情况下，高度是，20%但您可以height='yourNumber'设置自己的限制。我还删除了下拉列表中容器 30% 的折扣，以使其生效。这是更新的：JSimport React, { useState } from "react";import ReactDOM from "react-dom";import "./styles.css";function Dropdown() {&nbsp; const [inputList, setInputList] = useState([&nbsp; &nbsp; { courseName: "", courseRating: "" }&nbsp; ]);&nbsp; // handle input change&nbsp; const handleInputChange = (e, index) => {&nbsp; &nbsp; const { name, value } = e.target;&nbsp; &nbsp; const list = [...inputList];&nbsp; &nbsp; list[index][name] = value;&nbsp; &nbsp; setInputList(list);&nbsp; };&nbsp; // handle click event of the Remove button&nbsp; const handleRemoveClick = (index) => {&nbsp; &nbsp; const list = [...inputList];&nbsp; &nbsp; list.splice(index, 1);&nbsp; &nbsp; setInputList(list);&nbsp; };&nbsp; // handle click event of the Add busutton&nbsp; const handleAddClick = () => {&nbsp; &nbsp; setInputList([...inputList, { courseName: "", courseRating: "" }]);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="base-container-drop">&nbsp; &nbsp; &nbsp; <div className="content-drop">&nbsp; &nbsp; &nbsp; &nbsp; {inputList.map((x, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="container-for-drop">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="form-drop">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="form-group-drop">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label className="label-drop" htmlFor="courseName"></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="input-drop"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="courseName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Course Name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={x.firstName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => handleInputChange(e, i)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="form-group-drop-rating">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label className="label-drop" htmlFor="courseRating"></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="input-drop"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="number"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="courseRating"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max="10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min="0"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={x.lastName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => handleInputChange(e, i)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="btn-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {inputList.length !== 1 && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleRemoveClick(i)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="Remove"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Remove&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="sep" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {inputList.length - 1 === i && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleAddClick} className="Add">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Add&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}function ScrollableContainer(props) {&nbsp; const height = props.height || "20%";&nbsp; return (&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; className="scrollable-container"&nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; height&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {props.children}&nbsp; &nbsp; </div>&nbsp; );}function App(props) {&nbsp; return (&nbsp; &nbsp; <ScrollableContainer height="200px">&nbsp; &nbsp; &nbsp; <Dropdown />&nbsp; &nbsp; </ScrollableContainer>&nbsp; );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);CSS.scrollable-container {&nbsp; overflow: auto;}.base-comntainer-drop {&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;}.content-drop {&nbsp; display: flex;&nbsp; flex-direction: column;}.base-container-drop {&nbsp; width: 100%;&nbsp; overflow-y: auto;&nbsp; position: relative;&nbsp; /* max-height: 30%; */}.form-drop {&nbsp; position: relative;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; margin-top: 0.5em;&nbsp; margin: auto;&nbsp; text-align: center;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; padding-bottom: 0.7%;&nbsp; overflow-y: auto;}.form-group-drop {&nbsp; display: flex;&nbsp; position: relative;&nbsp; flex-direction: column;&nbsp; align-items: flex-start;&nbsp; width: 100%;&nbsp; margin: 1%;&nbsp; justify-content: center;&nbsp; align-items: center;}.form-group-drop-rating {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: flex-start;&nbsp; width: 100%;&nbsp; margin: -25%;&nbsp; justify-content: center;&nbsp; align-items: center;}.form-group-drop .input-drop {&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 100%;}.label-drop {&nbsp; text-align: center;&nbsp; font-size: 20px;}.form-group-drop .input-drop {&nbsp; position: relative;&nbsp; max-width: 200%;&nbsp; margin-top: 6px;&nbsp; height: 37px;&nbsp; padding: 0px 10px;&nbsp; font-size: 16px;&nbsp; font-family: "Open Sans", sans-serif;&nbsp; background-color: #f3f3f5;&nbsp; border: 0;&nbsp; border-radius: 4px;&nbsp; margin-bottom: 31px;&nbsp; transition: all 250ms ease-in-out;&nbsp; margin: 0;}.form-group-drop-rating .input-drop {&nbsp; position: relative;&nbsp; max-width: 30%;&nbsp; margin-top: 6px;&nbsp; height: 37px;&nbsp; padding: 0px 10px;&nbsp; font-size: 16px;&nbsp; font-family: "Open Sans", sans-serif;&nbsp; background-color: #f3f3f5;&nbsp; border: 0;&nbsp; border-radius: 4px;&nbsp; margin-bottom: 31px;&nbsp; transition: all 250ms ease-in-out;&nbsp; margin: 0;}.input-drop :focus {&nbsp; outline: none;&nbsp; box-shadow: 0px 6px 12px 0.8px #0e81ce96;}.btn-box {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; margin: auto;}.Add {&nbsp; position: relative;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; display: flex;&nbsp; width: fit-content;&nbsp; margin-top: 2px;&nbsp; height: 30px;&nbsp; padding: 8px 10px;&nbsp; padding-left: 8px;&nbsp; font-size: 12px;&nbsp; font-family: "Open Sans", sans-serif;&nbsp; background-color: #3498db;&nbsp; border: 0;&nbsp; transition: all 250ms ease-in-out;&nbsp; margin: 0;&nbsp; color: #fff;}.Remove {&nbsp; position: relative;&nbsp; width: fit-content;&nbsp; display: flex;&nbsp; margin-right: 5%;&nbsp; height: 30px;&nbsp; padding: 7px 10px;&nbsp; font-size: 12px;&nbsp; font-family: "Open Sans", sans-serif;&nbsp; background-color: #3498db;&nbsp; border: 0;&nbsp; transition: all 250ms ease-in-out;&nbsp; color: #fff;}.Add:hover {&nbsp; background-color: #fff;&nbsp; color: #6568f4;}.Remove:hover {&nbsp; background-color: #fff;&nbsp; color: #6568f4;}@media screen and (max-width: 960px) {&nbsp; .base-comntainer-drop {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; align-items: center;&nbsp; }&nbsp; .content-drop {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; }&nbsp; .form-drop {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; margin-top: 0.5em;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; padding-bottom: 0.7%;&nbsp; &nbsp; overflow-y: auto;&nbsp; }&nbsp; .form-group-drop {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; align-items: flex-start;&nbsp; &nbsp; width: 60%;&nbsp; &nbsp; margin: 1%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; }&nbsp; .form-group-drop-rating {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; align-items: flex-start;&nbsp; &nbsp; width: 50%;&nbsp; &nbsp; margin: -25%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; padding-left: 13%;&nbsp; }&nbsp; .form-group-drop .input-drop {&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; width: 100%;&nbsp; }&nbsp; .label-drop {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font-size: 20px;&nbsp; }&nbsp; .form-group-drop .input-drop {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; max-width: 200%;&nbsp; &nbsp; margin-top: 6px;&nbsp; &nbsp; height: 37px;&nbsp; &nbsp; padding: 0px 10px;&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; font-family: "Open Sans", sans-serif;&nbsp; &nbsp; background-color: #f3f3f5;&nbsp; &nbsp; border: 0;&nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; margin-bottom: 31px;&nbsp; &nbsp; transition: all 250ms ease-in-out;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; opacity: 75%;&nbsp; }&nbsp; .form-group-drop-rating .input-drop {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; max-width: 30%;&nbsp; &nbsp; margin-top: 6px;&nbsp; &nbsp; height: 37px;&nbsp; &nbsp; padding: 0px 10px;&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; font-family: "Open Sans", sans-serif;&nbsp; &nbsp; background-color: #f3f3f5;&nbsp; &nbsp; border: 0;&nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; margin-bottom: 31px;&nbsp; &nbsp; transition: all 250ms ease-in-out;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; opacity: 75%;&nbsp; }&nbsp; .input-drop :focus {&nbsp; &nbsp; outline: none;&nbsp; &nbsp; box-shadow: 0px 6px 12px 0.8px #0e81ce96;&nbsp; }&nbsp; .btn-box {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; padding-left: 15%;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; }&nbsp; .btn-box .sep {&nbsp; &nbsp; margin-top: 5%;&nbsp; }&nbsp; .Add {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; width: fit-content;&nbsp; &nbsp; margin-top: 2px;&nbsp; &nbsp; height: 30px;&nbsp; &nbsp; padding: 7px 10px;&nbsp; &nbsp; padding-left: 5px;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; font-family: "Open Sans", sans-serif;&nbsp; &nbsp; background-color: #3498db;&nbsp; &nbsp; border: 0;&nbsp; &nbsp; transition: all 250ms ease-in-out;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; color: #fff;&nbsp; }&nbsp; .Remove {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: fit-content;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; margin-right: 5%;&nbsp; &nbsp; height: 30px;&nbsp; &nbsp; padding: 7px 10px;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; font-family: "Open Sans", sans-serif;&nbsp; &nbsp; background-color: #3498db;&nbsp; &nbsp; border: 0;&nbsp; &nbsp; transition: all 250ms ease-in-out;&nbsp; &nbsp; color: #fff;&nbsp; }&nbsp; .Add:hover {&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; color: #6568f4;&nbsp; }&nbsp; .Remove:hover {&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; color: #6568f4;&nbsp; }}更新了代码沙箱以供预览。请注意，为了演示，我在 ScrollableContainer 上将高度设置为 200px。但你可以删除它，它将变成默认的 20%：https://codesandbox.io/s/react-hooks-usestate-forked-h1iqr