Question

我正在使用网格CSS，并且表单元素没有影响我的网格约定。

由于遵循网格要求，并确保表单本身是一个网格，内部有两列，一列用于输入，另一列用于提交按钮，因此我无法弄清楚它为什么失败。

所以在我看来，它们应该显示为嵌入式元素。

这是我的react.js片段：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./styles.css";

class App extends Component {
  state = {
    name: "",
    email: ""
  };

  onChange = e => {
    console.log("e.target.name: ", e.target.name);
    this.setState({ [e.target.name]: e.target.value });
  };

  sendForm = e => {
    e.preventDefault();
    console.log("form sent: ", this.state.name, this.state.email);
  };

  render() {
    return (
      <div className={style.newsletter_grid}>
        <h2 className={style.newsletter_headline}> newsletter headline</h2>

        <form className={style.newsletter_form} onSubmit={this.sendForm}>
          <div className={style.newsletter_input}>
            <input
              onChange={this.onChange}
              name="name"
              type="text"
              value={this.state.name}
              placeholder="name"
            />
            <input
              onChange={this.onChange}
              name="email"
              type="text"
              value={this.state.email}
              placeholder="email"
            />
          </div>

          <button type="submit" className={style.newsletter_conversion}>
            confirmer
          </button>
        </form>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

我的react.css代码段：

.newsletter_grid {
  display: grid;
  width: 100%;
  grid-template-areas:
    "headline headline"
    "form     form";
}

.newsletter_headline {
  grid-area: headline;
}

.form {
  grid-area: form;
  display: grid;
  grid-template-areas: "newsletter_input           newsletter_conversion";
}

.newsletter_input {
  grid-area: newsletter_input;
}

.newsletter_conversion {
  grid-area: newsletter_conversion;
}

如果有人有任何提示，那就太好了。谢谢。

为什么我的表单元素不遵循我的网格布局而显示为好像是块元素

0 个答案: