html - 我在 JSX 应用程序中遇到重叠元素的问题

Question

我创建了一个按钮，用于在表单中添加电子邮件输入(用于邀请)，但在输入一定数量时，它们会与页面上的其他元素重叠。

这是一些 CSS:

.App {
  height: 100%;
}
html,
body,
#root {
  margin: 0;
  height: 100%;
  font-family: "Montserrat";
}

.page {
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content {
  margin-top: 50px;
  width: 400px;
}

(这是一个 JSX 应用程序)

这是页面的屏幕截图:https://paste.pics/ab860613d5fd6eb82dfe59894ee24bc0

感谢您的帮助!

Answer 1

您可以在您的输入周围添加一个“容器”div。您可以从那里使用height和width props 以及 overflow: 'scroll' 属性。

像这样:

const { useState } = React;

// Create items
const NEW_INVITES = [...Array(10).keys()].map((item, index) => {
  return {
    id: index + 1,
    value: index + 1
  }
});

function InviteInput(props) {
  const { value, onChange } = props;
  const handleChange = e => {
    onChange && onChange(e);
  };
  return (
    <li>
      <input
        value={value}
        onChange={handleChange}
        className="form-input"
        type="email"
        placeholder="nom@exemple.com"
        name="invites"
        required
      />
    </li>
  );
}

function AddInviteButton(props) {
  return (
    <button onClick={props.onClick}>
      Ajouter une autre personne // (Add another person)
    </button>
  );
}

function InviteForm({ onSubmit, height, width, addBorder }) {
  const [nbInvites, setNbInvites] = useState(NEW_INVITES);
  let containerRef;

  const onAddInviteClick = () => {
    let id = nbInvites.length + 1;
    setNbInvites([
      ...nbInvites,
      {
        id,
        value: id
      }
    ]);
    setTimeout((cr) => {
      cr.scrollIntoView({ behavior: "smooth" });
    }, 100, containerRef);
  };

  const handleChange = (event, index) => {
    let newstate = [...nbInvites];
    newstate[index].value = event.target.value;
    setNbInvites(newstate);
  };

  const handleSubmit = event => {
    onSubmit(event, nbInvites);
  };

  const invitesContainer = {
    height,
    width,
    overflow: 'scroll',
    border: addBorder === true ? '1px solid black' : '',
  }

  return (
    <div>
      <div style={invitesContainer}>
      {nbInvites.map((item, index) => {
        return (
          <InviteInput
            key={index}
            value={item.value}
            onChange={e => handleChange(e, index)}
          />
        );
      })}
      <div ref={r => containerRef = r}/>
      </div>
      <AddInviteButton onClick={onAddInviteClick} />
      <br />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

function App() {
  const [formVals, setFormVals] = useState();

  const doSubmit = (event, formValues) => {
    setFormVals(formValues);
  };

  return (
    <div className="page">
      <h2 className="box-title">
        Qui sont les eleves de cette classe ? // (Who are the students in this
        class?)
      </h2>
      <p>
        Vous pourrez toujours en ajouter par la suite // (You can always add
        some later)
      </p>
      <InviteForm onSubmit={doSubmit} height="100px" width="200px" addBorder />
      {formVals ? <pre>{JSON.stringify(formVals, null, 2)}</pre> : ""}
    </div>
  );
}


ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>