无法在文本输入内部单击

Question

我有一个包含几个字段的基本表单。但是，我无法在悬停时单击项目名称输入字段。我可以通过点击标签来专注于它，但点击不起作用。这是 CSS 对齐问题吗？我究竟做错了什么？请帮忙！

这是表单域的截图：

这里是沙盒中的sn-p代码：

https://codesandbox.io/s/trusting-frost-gp7pj?from-embed

onFocus 能解决这个问题吗？

这里是sn-p的代码：

import React, { Component } from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";

import styled from "styled-components";

const InputText = styled.input.attrs({
  className: "form-control"
})``;

const RaiseMRNForm = styled.div.attrs({})`
  background-color: papayawhip;
  width: 100%;

  height: auto;
`;

const ModalWrapper = styled.div.attrs({})`
  border: 1px solid #d0cccc;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  transition: all 0.8s;
  height: 400%;
`;

const ModalHeader = styled.div.attrs({})`
  background-color: #035385;

  width: 100%;
  display: inline-block;
`;

const MRNHeading = styled.div.attrs({})`
  width: 50%;
  float: left;
  margin-top: 1%;
  color: white;
  margin-left: 1%;
`;

const CrossButton = styled.div.attrs({})`
  color: white;
  width: 5%;
  float: right;
`;

const InputTextAreas = styled.div.attrs({})`
  background-color: gray;
  display: inline-block;
  width: 100%;
`;

const InputClient = styled.div.attrs({})`
  width: 40%;
  margin-top: 1%;
  margin-left: 5%;
  float: left;
  position: absolute;
`;

const InputStockItem = styled.div.attrs({})`
  width: 40%;
  float: left;

  margin-top: 1%;
  position: absolute;
  margin-left: 50%;
`;

const StockInformation = styled.div.attrs({})`
  height: 100%;
  width: 100%;
  position: absolute;

  margin-top: 7%;
`;

const DropDownContainer = styled.div.attrs({})`
  margin-left: 5%;
  width: 40%;
  position: absolute;
`;

const InputStockQuantity = styled.div.attrs({})`
  margin-left: 50%;
  margin-top: 0.2%;
  width: 20%;
  position: absolute;
`;

const InputStockUnit = styled.div.attrs({})`
  margin-left: 5%;
  margin-top: 1%;
  width: 10%;
  position: absolute;
`;

const ModalFooter = styled.div.attrs({})`
  position: absolute;
  background-color: #035385;
  width: 100%;
  height: auto;
`;

const AddButton = styled.button.attrs({})`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: white;
  border: 2px solid white;
  margin-top: 1%;
  margin-left: 1%;
  margin-bottom: 1%;
  height: 6%;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  &:hover {
    background-color: palevioletred;
    color: white;
  }
`;

const CancelButton = styled.button.attrs({})`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: white;
  border: 2px solid white;
  margin-top: 1%;
  margin-left: 80%;
  margin-bottom: 1%;
  height: 5%;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  &:hover {
    background-color: palevioletred;
    color: white;
  }
`;

const options = ["Safety", "Consumable", "Machinery", "Hardware"];

class MRNmodal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: true,
      close: false,

      value: "Safety"
    };
  }

  handleChangeInputClientName = async event => {};

  handleChangeInputStockItemName = async event => {
    const itemName = event.target.value;
    this.setState({ itemName });

    console.log("Inside handleChangeInputStockItemName ========> ", itemName);
  };

  handleChangeInputStockItemQuantity = async event => {
    const itemQuantity = event.target.value;
    this.setState({ itemQuantity });

    console.log(
      "Inside handleChangeInputStockItemQuanity ========> ",
      itemQuantity
    );
  };

  handleChangeInputStockItemUnit = async event => {
    const itemUnit = event.target.value;
    this.setState({ itemUnit });

    console.log("Inside handleChangeInputStockItemUnit ========> ", itemUnit);
  };

  handleDropdownChange = option => {
    console.log("Inside handleDropdownChange ", option);
    this.setState({ itemType: option.label });
    console.log("this.state.itemType", this.state.itemType);
  };

  render() {
    var {
      clientName,
      itemName,
      itemQuantity,
      itemUnit,

      show,
      close
    } = this.state;

    show = true;
    close = false;

    return (
      <div>
        <ModalWrapper
          style={{
            transform: show ? "translateY(0vh)" : "translateY(-100vh)",
            opacity: show ? "1" : "0"
          }}
        >
          <ModalHeader>
            <MRNHeading>
              <h3>Raise MRN</h3>
            </MRNHeading>
            <CrossButton>
              <span>
                <h1>x</h1>
              </span>
            </CrossButton>
          </ModalHeader>

          <RaiseMRNForm>
            <InputTextAreas>
              <InputClient>
                <p style={{ textAlign: "left" }}>Enter Client Name</p>

                <InputText
                  style={{ border: "1px solid black" }}
                  type="text"
                  value={clientName}
                  onChange={this.handleChangeInputClientName}
                />
              </InputClient>

              <InputStockItem>
                <p style={{ textAlign: "left" }}>Enter Stock Item Name</p>

                <InputText
                  style={{ border: "1px solid black" }}
                  type="text"
                  value={itemName}
                  onChange={this.handleChangeInputStockItemName}
                />
              </InputStockItem>
            </InputTextAreas>

            <StockInformation>
              <DropDownContainer>
                <p style={{ textAlign: "left" }}>Enter Stock Type</p>
                <Dropdown
                  value={this.state.itemType}
                  options={options}
                  onChange={this.handleDropdownChange.bind(this)}
                  placeholder="Select an option"
                />
              </DropDownContainer>

              <p style={{ textAlign: "left", marginLeft: "50%" }}>
                Enter Stock Quantity
              </p>
              <InputStockQuantity>
                <InputText
                  style={{ border: "1px solid black" }}
                  type="text"
                  value={itemQuantity}
                  onChange={this.handleChangeInputStockItemQuantity}
                />
              </InputStockQuantity>

              <InputStockUnit>
                <p
                  style={{
                    textAlign: "left",
                    marginLeft: "0%",
                    marginTop: "30%"
                  }}
                >
                  Enter Stock Unit
                </p>
                <InputText
                  style={{ border: "1px solid black" }}
                  type="text"
                  value={itemUnit}
                  onChange={this.handleChangeInputStockItemUnit}
                />
              </InputStockUnit>
            </StockInformation>


          </RaiseMRNForm>

          <ModalFooter>
            <CancelButton>CLOSE</CancelButton>
            <AddButton onClick={this.handleIncludeClient}>CONTINUE</AddButton>
          </ModalFooter>
        </ModalWrapper>
      </div>
    );
  }
}

export default MRNmodal;

我包含了大部分代码，因为我不知道这是否是 CSS 问题。

Answer 1

使用 HTML <label> 元素而不是 <p> 已经解决了第一个问题。通过这样做，您将能够选择输入字段。

通过使用该标签上的htmlFor 属性以及相应输入上的ID，您还可以单击标签本身来定位输入字段。

htmlFor 是 React 使用 HTML for attribute 的方式。

简短示例 sn-p：

<InputClient>
  <label
    htmlFor="inputClientName" // this targets the input
    style={{ textAlign: "left" }}
  >
    Enter Client Name
  </label>
  <InputText
    id="inputClientName" // consistent id (make it unique)
    style={{ border: "1px solid black" }}
    type="text"
    value={clientName}
    onChange={this.handleChangeInputClientName}
  />
</InputClient>

工作示例： https://codesandbox.io/s/muddy-tree-fb0fd