Question

我的应用中有以下代码，

<CommentModal show={this.state.commentModal}
    handleClose={this.hideModal}
    handleChange={this.handleCommentChange}
    handleSubmit={this.handleCommentSubmit}
    textareaValue={this.state.comment}
/>

句柄更改功能看起来像这样

handleCommentChange(e) {
    this.setState({
        [e.target.id] : e.target.value
    })
}

此操作在具有文本区域的每个按键上运行，但是看起来该组件在每次按键时都会重新渲染，并且在每次按键后文本区域失去焦点，我制作了一个简短的视频来展示我的问题。

https://www.useloom.com/share/8f27de7a341f408b807c11c62d3c1cf3

这是commentModal代码

import React, { Component } from 'react';

从“样式化的组件”导入样式；

CommentModal类扩展了组件{

constructor(props) {
    super(props);
}

render() {
    const ModalWrapper = styled.div`
        position: fixed;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display:none;
        z-index:999;
        &.display-block {
            display:block;
        }
    `;

    const ModalBody = styled.div`
        position:fixed;
        width: 41%;
        height: 53%;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        position:relative;
        display:flex;
        form {
            width:100%;
            height:100%;
            display: flex;
            flex-direction: column;
            textarea {
                width:100%;
                height:calc(100% - 54px);
                resize:none;
                border:0 none;
                color:#fff;
                padding:50px 40px;
                background: black;
                border-radius:15px 15px 0px 0px;
                outline:0 none;
                padding-bottom:20px;
                &::-webkit-input-placeholder {
                    color:#8e8e93;
                }
            }

        }

        button {
            width:100%;
            flex:1;
            background-color:#22cae5;
            width:100%;
            border-radius:0px 0px 15px 15px;
            color:#fff;
            margin-top:auto;
            border:none;
            padding:15px 0px;
            position:absolute;
            left:0;
            bottom:0;
        }
    `;

    const CloseModal = styled.div`
        height:60px;
        width:60px;
        border-radius:100%;
        background-color:#22cae5;
        color:#fff;
        text-align:center;
        line-height:60px;
        position:absolute;
        top:-15px;
        right:-15px;
        font-size:1.5em;
    `;

    return(
        <ModalWrapper className={this.props.show ? 'display-block' : 'display-none'}>
            <ModalBody>
                <CloseModal onClick={this.props.handleClose}>X</CloseModal>
                <form action="/" onSubmit={this.props.handleSubmit}>
                    <textarea id="comment" key="comment" placeholder="Start typing your comment here..." value={this.props.textareaValue} onChange={this.props.handleChange}></textarea>
                    <button type="submit">Add Comment</button>
                </form>
            </ModalBody>
        </ModalWrapper>
    );
}

}

导出默认的CommentModal;

Answer 1

setState触发组件重新渲染。 See here

Answer 2

您似乎应该使用shouldComponentUpdate()生命周期挂钩。

基本上，它只允许在特定更改下重新渲染组件，您可以在此挂钩中指定它们，否则返回false。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_component_update.html

react组件似乎在我的keyup事件上重新呈现

2 个答案: