ReactCSSTransitionGroup與受控組件不起作用組件

將消息添加到對話時使用了反應轉換。它始終工作時，我按發送按鈕，但當我確認'輸入'它不工作 - Opera和Chrome。在Chrome中，有時候我會覺得轉換髮生得非常快。ReactCSSTransitionGroup與受控組件不起作用組件

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我在這裏幹什麼什麼了嗎？

編輯：

它幫助時，我MessageInput不受控制通過刪除value但後來我發送消息後不能清除輸入...

來源

2017-02-25 Tomasz

我已經找到了解決辦法：

.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類。

來源

2017-02-26 08:12:40 Tomasz

ReactCSSTransitionGroup與受控組件不起作用組件

回答

相關問題