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% 的折扣，以使其生效。

这是更新的：

JS

import React, { useState } from "react";

import ReactDOM from "react-dom";

import "./styles.css";

function Dropdown() {

  const [inputList, setInputList] = useState([

    { courseName: "", courseRating: "" }

  ]);

  // 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 busutton

  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 className="btn-box">

                  {inputList.length !== 1 && (

                    <button

                      onClick={() => handleRemoveClick(i)}

                      className="Remove"

                    >

                      Remove

                    </button>

                  )}

                  <div className="sep" />

                  {inputList.length - 1 === i && (

                    <button onClick={handleAddClick} className="Add">

                      Add

                    </button>

                  )}

                </div>

              </div>

            </div>

          );

        })}

      </div>

    </div>

  );

}

function ScrollableContainer(props) {

  const height = props.height || "20%";

  return (

    <div

      className="scrollable-container"

      style={{

        height

      }}

    >

      {props.children}

    </div>

  );

}

function App(props) {

  return (

    <ScrollableContainer height="200px">

      <Dropdown />

    </ScrollableContainer>

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

CSS

.scrollable-container {

  overflow: auto;

}

.base-comntainer-drop {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.content-drop {

  display: flex;

  flex-direction: column;

}

.base-container-drop {

  width: 100%;

  overflow-y: auto;

  position: relative;

  /* max-height: 30%; */

}

.form-drop {

  position: relative;

  display: flex;

  flex-direction: row;

  margin-top: 0.5em;

  margin: auto;

  text-align: center;

  display: flex;

  align-items: center;

  padding-bottom: 0.7%;

  overflow-y: auto;

}

.form-group-drop {

  display: flex;

  position: relative;

  flex-direction: column;

  align-items: flex-start;

  width: 100%;

  margin: 1%;

  justify-content: center;

  align-items: center;

}

.form-group-drop-rating {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  width: 100%;

  margin: -25%;

  justify-content: center;

  align-items: center;

}

.form-group-drop .input-drop {

  justify-content: center;

  align-items: center;

  width: 100%;

}

.label-drop {

  text-align: center;

  font-size: 20px;

}

.form-group-drop .input-drop {

  position: relative;

  max-width: 200%;

  margin-top: 6px;

  height: 37px;

  padding: 0px 10px;

  font-size: 16px;

  font-family: "Open Sans", sans-serif;

  background-color: #f3f3f5;

  border: 0;

  border-radius: 4px;

  margin-bottom: 31px;

  transition: all 250ms ease-in-out;

  margin: 0;

}

.form-group-drop-rating .input-drop {

  position: relative;

  max-width: 30%;

  margin-top: 6px;

  height: 37px;

  padding: 0px 10px;

  font-size: 16px;

  font-family: "Open Sans", sans-serif;

  background-color: #f3f3f5;

  border: 0;

  border-radius: 4px;

  margin-bottom: 31px;

  transition: all 250ms ease-in-out;

  margin: 0;

}

.input-drop :focus {

  outline: none;

  box-shadow: 0px 6px 12px 0.8px #0e81ce96;

}

.btn-box {

  display: flex;

  flex-direction: row;

  margin: auto;

}

.Add {

  position: relative;

  justify-content: center;

  align-items: center;

  display: flex;

  width: fit-content;

  margin-top: 2px;

  height: 30px;

  padding: 8px 10px;

  padding-left: 8px;

  font-size: 12px;

  font-family: "Open Sans", sans-serif;

  background-color: #3498db;

  border: 0;

  transition: all 250ms ease-in-out;

  margin: 0;

  color: #fff;

}

.Remove {

  position: relative;

  width: fit-content;

  display: flex;

  margin-right: 5%;

  height: 30px;

  padding: 7px 10px;

  font-size: 12px;

  font-family: "Open Sans", sans-serif;

  background-color: #3498db;

  border: 0;

  transition: all 250ms ease-in-out;

  color: #fff;

}

.Add:hover {

  background-color: #fff;

  color: #6568f4;

}

.Remove:hover {

  background-color: #fff;

  color: #6568f4;

}

@media screen and (max-width: 960px) {

  .base-comntainer-drop {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

  }

  .content-drop {

    display: flex;

    flex-direction: column;

  }

  .form-drop {

    position: relative;

    display: flex;

    flex-direction: row;

    margin-top: 0.5em;

    margin: auto;

    text-align: center;

    display: flex;

    align-items: center;

    padding-bottom: 0.7%;

    overflow-y: auto;

  }

  .form-group-drop {

    display: flex;

    position: relative;

    flex-direction: column;

    align-items: flex-start;

    width: 60%;

    margin: 1%;

    justify-content: center;

    align-items: center;

  }

  .form-group-drop-rating {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 50%;

    margin: -25%;

    justify-content: center;

    align-items: center;

    padding-left: 13%;

  }

  .form-group-drop .input-drop {

    justify-content: center;

    align-items: center;

    width: 100%;

  }

  .label-drop {

    text-align: center;

    font-size: 20px;

  }

  .form-group-drop .input-drop {

    position: relative;

    max-width: 200%;

    margin-top: 6px;

    height: 37px;

    padding: 0px 10px;

    font-size: 16px;

    font-family: "Open Sans", sans-serif;

    background-color: #f3f3f5;

    border: 0;

    border-radius: 4px;

    margin-bottom: 31px;

    transition: all 250ms ease-in-out;

    margin: 0;

    opacity: 75%;

  }

  .form-group-drop-rating .input-drop {

    position: relative;

    max-width: 30%;

    margin-top: 6px;

    height: 37px;

    padding: 0px 10px;

    font-size: 16px;

    font-family: "Open Sans", sans-serif;

    background-color: #f3f3f5;

    border: 0;

    border-radius: 4px;

    margin-bottom: 31px;

    transition: all 250ms ease-in-out;

    margin: 0;

    opacity: 75%;

  }

  .input-drop :focus {

    outline: none;

    box-shadow: 0px 6px 12px 0.8px #0e81ce96;

  }

  .btn-box {

    display: flex;

    flex-direction: column;

    padding-left: 15%;

    margin: auto;

    justify-content: center;

    align-items: center;

  }

  .btn-box .sep {

    margin-top: 5%;

  }

  .Add {

    position: relative;

    justify-content: center;

    align-items: center;

    display: flex;

    width: fit-content;

    margin-top: 2px;

    height: 30px;

    padding: 7px 10px;

    padding-left: 5px;

    font-size: 12px;

    font-family: "Open Sans", sans-serif;

    background-color: #3498db;

    border: 0;

    transition: all 250ms ease-in-out;

    margin: 0;

    color: #fff;

  }

  .Remove {

    position: relative;

    width: fit-content;

    display: flex;

    margin-right: 5%;

    height: 30px;

    padding: 7px 10px;

    font-size: 12px;

    font-family: "Open Sans", sans-serif;

    background-color: #3498db;

    border: 0;

    transition: all 250ms ease-in-out;

    color: #fff;

  }

  .Add:hover {

    background-color: #fff;

    color: #6568f4;

  }

  .Remove:hover {

    background-color: #fff;

    color: #6568f4;

  }

}

更新了代码沙箱以供预览。请注意，为了演示，我在 ScrollableContainer 上将高度设置为 200px。但你可以删除它，它将变成默认的 20%：https://codesandbox.io/s/react-hooks-usestate-forked-h1iqr