Question

我在向对话添加消息时使用反应转换。当我按下发送按钮时，它始终有效，但当我确认“输入”时，它无法用于 - Opera和Chrome。在Chrome中，有时我会觉得过渡非常快。

const userMessage = {
    userImage: userImage,
    userName: 'Jason Leapman',
    date: '19:56',
    message: `Agriculture fed larger`

const guestMessage = {
    userImage: guestImage,
    userName: 'Adrian Simon',
    date: '19:56',
    message: `Man's technological ascent`
};

const fakeConversation = [
    userMessage,
    guestMessage,
    guestMessage,
    userMessage,
    guestMessage
];


export default class extends Component {
    constructor() {
        super();
        this.state = {
            message: ''
        }
    }


    renderConversation() {
        return fakeConversation.map(
            (message, i) => <Message key={i} message={message}/>
        );
    }

    sendMessage() {
        this.setState(prevState => {
            const {message} = prevState;
            if (message) {
                const newMessage = Object.assign({}, {...userMessage}, {message});
                fakeConversation.push(newMessage);
                return {message: ''};
            }
        });

        return false;
    }

    onChange(e) {
        this.setState({message: e.target.value});
    }

    onKeyPress(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            this.sendMessage();
        }
    }

    render() {
        const conversation = this.renderConversation(),
            sendMessage = this.sendMessage.bind(this),
            {message} = this.state,
            onChange = this.onChange.bind(this),
            onKeyPress = this.onKeyPress.bind(this);

        return (
            <Col componentClass="section" xs={12} className="Conversation">
                <div ref={list => this.conversationList = list} className="conversation-list">
                    <FadingTransition>
                        {conversation}
                    </FadingTransition>
                </div>
                <Row className="message-input-row">
                    <Col xs={12}>
                        <MessageInput
                            id="message-input"
                            name="message-input"
                            value={message}
                            onKeyPress={onKeyPress}
                            onChange={onChange}
                            onSendClick={sendMessage}/>
                    </Col>
                </Row>


            </Col>
        );
    }
}

FadingTransition：

export default ({children, component = 'div', appear = true, enter = true, leave = true}) => (
    <ReactCSSTransitionGroup
        component={component}
        className="FadingTransition"
        transitionName="fading"
        transitionAppear={appear}
        transitionEnter={enter}
        transitionLeave={leave}
        transitionAppearTimeout={100}
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}>

        { children }
    </ReactCSSTransitionGroup>
);

CSS：

.FadingTransition {

    > .fading-enter,
    > .fading-leave {
        margin-left: -200px;
        transition: margin-left .5s ease-out;

        &.fading-enter-active,
        &.fading-leave-active {
            margin-left: 0;
        }
    }

    > .fading-appear{
        opacity: 0;
        transition: all .1s ease-out;

        &.fading-appear-active {
            opacity: 1;
        }
    }
}

这是怎么回事onKeyPress我在这里做错了什么？

编辑：

当我通过删除value而无法控制MessageInput时，它有所帮助但是在发送消息后我无法清除输入...

Answer 1

我找到了解决方案：

.MessageTransition {
    > .fading-enter,
    > .fading-leave {
        margin-left: -200px;

        &.fading-enter-active,
        &.fading-leave-active {
            transition: all .5s ease-out;
            margin-left: 0;
        }
    }

    > .fading-appear {
        opacity: 0;

        &.fading-appear-active {
            transition: all .1s ease-out;
            opacity: 1;
        }
    }
}

我移动了过渡属性do * -active class。

ReactCSSTransitionGroup不使用受控Component

1 个答案: