我有一些基本字段。但是,我无法单击项目名称输入字段来获得光标。我可以通过点击选项卡来专注于此,但是单击不起作用。这是CSS对齐问题吗?我花了很长时间来摆脱这个问题。我究竟做错了什么?请帮助!
这是表单字段的屏幕截图:
这是沙盒中的代码片段:
https://codesandbox.io/s/trusting-frost-gp7pj?from-embed
onFocus是否可以解决此问题?
这里是代码段:
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问题。
向您的元素添加标签已经解决了第一个问题。这样,您将能够选择输入字段。