在ReactJS中添加onChange後無法輸入輸入字段

Question

我正在創建ReactJS聊天應用程序。如果用戶開始輸入消息，那麼我希望其他用戶應該收到一條消息，說用戶名正在鍵入。所以爲此，我使用onChange，但無論用戶輸入什麼，都不會進入輸入文本框。

Message.js文件

const socket = io('localhost:9000'); 

class Message extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: "", 
     messages: "", 
     typing: "", 
    } 
    this.sendMessage = this.sendMessage.bind(this); 
    this.onTyping = this.onTyping.bind(this); 
    } 

    sendMessage(message) { 
    console.log(this.state.data, "=============>state dataa") 
    const data = { 
     message, 
     senderId: this.props.userId, 
     roomId: this.state.data.roomId 
    }; 
    console.log('Inside New message', data); 
    socket.emit('new message', data); 
    } 

    onTyping(typing) { 
    console.log(this.state.typing, "=====Typing Message===="); 
    } 

    render() { 
    const { messages, userId, chatDetails } = this.props; 
    console.log('Chat in container : ', messages.toJS()); 

    return (
     <div className="message"> 
     { !chatDetails && <h1 style={{ textAlign: 'center' }}>Initiate a New Chat.</h1> } 
     { chatDetails && <MessageList messages={this.state.message} user={userId} /> } 
     { chatDetails && <MessageBar send={this.sendMessage} typingMessage={this.onTyping}/> } 
     </div> 
    ); 
    } 
} 

const mapStateToProps = state => ({ 
    messages: state.get('messages'), 
    userId: state.getIn(['profile', 'id']), 
    chatDetails: state.getIn(['videocall', 'callerDetails']) 
}); 

const mapDispatchToProps = dispatch => ({ 
    saveMessage: payload => dispatch(saveMessage(payload)), 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(Message); 

MessageBar.js

class MessageBar extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { message: '' }; 
    this.sendMessage = this.sendMessage.bind(this); 
    this.onTyping = this.onTyping.bind(this); 
    } 

    onTyping(e) { 
    this.setState({typing: e.target.value}); 
    this.props.typingMessage(this.state.typing); 
    } 

    sendMessage(e) { 
    this.setState({message: ''}); 
    this.props.send(this.state.message); 
    } 


    render() { 
    return (
     <div className="message-bar"> 
     <input 
      value={this.state.message} 
      type="text" 
      onChange={this.onTyping} 
      placeholder="Type your message ..." 
     /> 
     <button onClick={this.sendMessage}> 
      <i className="fa fa-paper-plane" /> 
     </button> 
     </div> 
    ); 
    } 
} 

export default MessageBar; 

我使用socket.io和reactjs這個聊天應用程序任何人都可以請幫我出這一點。

Answer 1

我認爲你必須更新消息而不是在onTyping函數中打字的狀態。

onTyping(e) { 
this.setState({message: e.target.value}); 
this.props.typingMessage(this.state.typing); 
} 

Answer 2

setState是異步的，所以你需要等待狀態時，它發送到道具之前設置。

class MessageBar extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { message: '' }; 
    this.sendMessage = this.sendMessage.bind(this); 
    this.onTyping = this.onTyping.bind(this); 
    } 

    onTyping(e) { 
    // here wait for state to set 
    this.setState({typing: e.target.value},() => { 
     this.props.typingMessage(this.state.typing); 
    }); 
    } 

    sendMessage(e) { 
    this.setState({message: ''}); 
    this.props.send(this.state.message); 
    } 


    render() { 
    return (
     <div className="message-bar"> 
     <input 
      value={this.state.message} 
      type="text" 
      onChange={this.onTyping} 
      placeholder="Type your message ..." 
     /> 
     <button onClick={this.sendMessage}> 
      <i className="fa fa-paper-plane" /> 
     </button> 
     </div> 
    ); 
    } 
} 

export default MessageBar;