Question

我有一个原型聊天应用程序，我现在可以在两个查看器窗口（代理和用户）中显示已发送的消息。但是，我无法弄清楚如何只显示在一个窗口中发送的已发送消息，而在另一个窗口中接收，反之亦然。因此，如果代理发送消息，它将在两个窗口中显示其名称和消息。我以为我需要通过＆＃34;作者＆＃34;进入每个＆＃34;用户消息＆＃34;和＃34;代理消息＆＃34;在App.js中，但这不起作用。

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: []
    }
    this.handleNewMessage = this.handleNewMessage.bind(this);
  }

  static propTypes = {
    messages: PropTypes.arrayOf(PropTypes.object)
  }

  handleNewMessage = (text) => {
    this.setState({
      messages: [...this.state.messages, { me: true, author: "Me", body: text},{ me: true, author: "Agent", body: text}]
    })
  }
  render() {
    return (
      <div className="App">
        <div className="agentWindow">
          <Agent messages={this.state.messages} handleNewMessage={this.handleNewMessage} />
        </div>
        <div className="userWindow">
          <User messages={this.state.messages} handleNewMessage={this.handleNewMessage} />
        </div>
      </div>
    );
  }
}

Agent.js （User.js相同）

class Agent extends Component {
  render() {
    return (
      <div className="Agent">
        <header>
          <p>Agent</p>
        </header>
        <MessageList messages={this.props.messages} />
        <MessageForm onMessageSend={this.props.handleNewMessage} />
      </div>
    );
  }
}

Message.js

class Message extends Component {
  static propTypes = {
    author: PropTypes.string,
    body: PropTypes.string.isRequired,
    me: PropTypes.bool
  }

  render() {
    const classes = classNames('Message', {
      log: !this.props.author,
      me: this.props.me
    })

    return (
      <div className={classes}>
        {this.props.author && (
          <span className="author">{this.props.author}:</span>
        )}
        {this.props.body}
      </div>
    )
  }
}

MessageList.js

class MessageList extends Component {
  static propTypes = {
    messages: PropTypes.arrayOf(PropTypes.object)
  }

  static defaultProps = {
    messages: [],
  }

  componentDidUpdate = () => {
    this.node.scrollTop = this.node.scrollHeight
  }

  render() {
    return (
      <div className="MessageList" ref={(node) => (this.node = node)}>
        {this.props.messages && this.props.messages.map((message, i) => (
            <Message key={i} {...message} />
        ))}
      </div>
    )
  }
}

MessageForm.js

class MessageForm extends Component {
  static propTypes = {
    onMessageSend: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    this.input.focus()
  }

  handleFormSubmit = (event) => {
    event.preventDefault()
    this.props.onMessageSend(this.input.value)
    this.input.value = ""
  }

  render() {
    return (
      <form className="MessageForm" onSubmit={this.handleFormSubmit}>
        <div className="input-container">
          <input
            type="text"
            ref={(node) => (this.input = node)}
            placeholder="Enter Message..."
          />
        </div>
        <div className="button-container">
          <button type="submit">
            Send
          </button>
        </div>
      </form>
    )
  }
}

Answer 1

我不理解你的解释......修改我的答案。请h / o。

行。你走在正确的轨道上。以下是我认为您正在寻找的解决方案：

https://codesandbox.io/s/jz6o9y5n7v

只有一些变化。在表格上，我添加了＆＃34;来源＆＃34; prop并将其传递给App组件中的处理程序。这正确地将作者道具设置为从表单发送的源。我从messages数组中删除了第二个数据元素。所有这些都为您提供了我认为您想要的输出。

感谢有机会帮助解决这个问题。

将响应显示在其他用户窗口中发送/接收的消息

1 个答案: