Javascript 文本区域在模式中键入时失去焦点？

我有一个使用样式化组件创建的文本区域和模式。当我在文本区域键入一个字母时，就会失去焦点。我不确定我的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 || ''}/>]}/>

---

问题可能是

键

。我已经回答了输入在键入时丢失光标的其他问题。。它与

键相关。基本上，每个渲染周期都会删除元素，然后替换，这就是为什么会失去焦点。当密钥频繁更改时会发生这种情况。尝试为您呈现的每个文本区域指定一个特定的唯一标识符，并将其作为键引用。@JohnRuddell感谢您的回复！在上面的示例中渲染时，我将键值设置为1，而不是其他元素的键值为{1}。把它当作钥匙不合适吗？我尝试将其更改为其他唯一值，但仍然存在相同的问题。您是否可以在codesandbox或其他东西上复制该问题，以便我可以查看？我可能会将键放在类似
key=“rejection modal textarea”
的位置，我不确定这是否是导致问题的原因，但我在元素上设置
值时遇到了类似的输入问题。我可以通过将
value
更改为
defaultValue
来解决问题。对元素使用
value
可能会产生意外的结果。
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}>&times;</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;
    }
    `;