Javascript 在ReactJS中添加onChange后无法键入输入字段

我正在创建一个聊天应用程序。如果一个用户开始键入一条消息，那么我希望另一个用户应该得到一条消息，说username正在键入。因此，我使用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);

const socket=io（'localhost:9000'）；
类消息扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：“，
消息：“”，
键入：“”，
}
this.sendMessage=this.sendMessage.bind（this）；
this.onTyping=this.onTyping.bind（this）；
}
发送消息（消息）{
console.log（this.state.data，“================>state dataa”）
常数数据={
消息
senderId:this.props.userId，
roomId:this.state.data.roomId
};
console.log（'在新消息内'，数据）；
发出（'新消息'，数据）；
}
打字（打字）{
console.log（this.state.typing，“==typingmessage==”；
}
render（）{
const{messages，userId，chatDetails}=this.props；
log（'Chat in container:'，messages.toJS（））；
返回(
{！聊天详情&&启动新聊天。}
{chatDetails&&}
{chatDetails&&}
);
}
}
常量mapStateToProps=状态=>({
messages:state.get（'messages'），
userId:state.getIn（['profile'，'id']），
chatDetails:state.getIn（['videocall'，'callerDetails']）
});
const mapDispatchToProps=调度=>({
saveMessage:payload=>dispatch（saveMessage（payload）），
});
导出默认连接（mapStateToProps、mapDispatchToProps）（消息）；

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;

class消息栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={消息：'}；
this.sendMessage=this.sendMessage.bind（this）；
this.onTyping=this.onTyping.bind（this）；
}
打字（e）{
this.setState（{typing:e.target.value}）；
this.props.typingMessage（this.state.typing）；
}
发送消息（e）{
this.setState（{消息：'}）；
this.props.send（this.state.message）；
}
render（）{
返回(
);
}
}
导出默认消息栏；

---

我正在使用socket.io和reactjs进行此聊天应用程序。任何人都可以帮我解决此问题。

我认为您必须更新消息的状态，而不是在onTyping功能中键入

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

---

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;

class消息栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={消息：'}；
this.sendMessage=this.sendMessage.bind（this）；
this.onTyping=this.onTyping.bind（this）；
}
打字（e）{
//在这里等待状态设置
this.setState（{typing:e.target.value}，（）=>{
this.props.typingMessage（this.state.typing）；
});
}
发送消息（e）{
this.setState（{消息：'}）；
this.props.send（this.state.message）；
}
render（）{
返回(
);
}
}
导出默认消息栏；