我有一个使用样式组件创建的textarea和模式。当我在textarea中输入一个字母时,会失去焦点。我不确定css是问题还是渲染的方式。当它不在模态中时,它可以正常工作。
在我的渲染器中
<ModalMessage show={this.state.showRejectModal}
onClose={() => this.setState({showRejectModal: false})}
content={[<p key={'rejectionMessage'}>Are you sure you want to reject?</p>,
<TextArea key={1}
type={'text'}
onChange={(e) => this.setState({reasonForRejection: e.target.value})}
name={'reasonForRejection'}
placeholder={'Reason for rejection'}
value={this.state.reasonForRejection || ''}/>]}/>
以文本区域作为props.content的模式组件
const ModalMessage = (props) => {
const ModalWrapper = styled.div`
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
`;
const ModalContent = styled.div`
background-color: ${modalBackgroundColor};
margin: 15% auto;
padding: 20px;
//border: 1px solid #888;
width: 30%;
`;
const ModalCloseButton = styled.span`
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
:hover, focus{
color: black;
text-decoration: none;
cursor: pointer;
}
`;
const HideScroll = createGlobalStyle`
body{
overflow: hidden;
}
`;
return (
<React.Fragment>
{props.show ? <ModalWrapper>
<ModalContent>
<HideScroll/>
{props.noClose ? null : <ModalCloseButton onClick={props.onClose}>×</ModalCloseButton>}
{props.cancel ? <FontAwesomeIcon icon={faMinusCircle} size='6x' style={{color: '#96aff5'}}/> :
<FontAwesomeIcon icon={faCheckCircle} size='6x' style={{color: '#96aff5'}}/>}<br/>
{props.content}
</ModalContent>
</ModalWrapper> : null}
</React.Fragment>
);
};
文本区域
export const TextArea = styled.textarea`
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
display: block;
width: 100%;
padding: 7px;
border: none;
border-bottom: 1px solid #ddd;
background: transparent;
margin-bottom: 10px;
font: 16px Arial, Helvetica, sans-serif;
height: 45px;
overflow: hidden;
margin-left: 2px;
color: #808080;
::placeholder {
color: #808080;
opacity: 1;
}
`;