引用另一个组件中的动态列表项

Question

我正在尝试构建一个允许用户互相发送消息的应用。这是一个包含姓名和号码列表的联系人列表。用户选择联系人并向该联系人发送消息。

我尝试获取所选联系人并在另一个窗格中打开信息，该信息允许用户撰写邮件并发送给所选的特定联系人。我这样做有困难，因为我不确定如何引用所选的联系人列表值并让它在窗格中呈现？或者至少是从其他组件操作动态DOM项的方法是什么？

 export default class Rooms extends React.Component {

 constructor(props) {
    super(props);
    this.state = {
      roomName: '',
      rooms: [],
      records: []
    };
    this.handleOnSubmit = this
      .handleOnSubmit
      .bind(this);
  }

  handleSearch(e) {
    this.setState({roomName: e.target.value})
  }

  handleChange(e) {
    this.setState({
      roomName: e
        .target
        .value
        .substr(0, 100)
    });

  }

  handleOnSubmit(e) {

    var conn = new jsforce.Connection({
      serverUrl: 'blank',
      accessToken: sessionStorage.getItem('token')
    })

    var parent = this.state.roomName
    //console.log(this.state.username)
    conn
      .sobject("Contact")
      .find({
        LastName: {
          $like: parent
        }
      }, 'Id, Name, Phone, Account.Name')
      .sort('-CreatedDate Name')
      .limit(5)
      .skip(10)
      .execute((err, records) => { //use arrow function
        if (err) {
          return console.error(err);
        }
        console.log('records values', records);
        this.setState({records: records})
      })

  }

  // Returns a list of contacts
  renderRoomList() {
    const {roomId} = this.props.params;
    const {rooms, roomName, records} = this.state;
    return (
      <div className="list-group">
        {this
          .state
          .records
          .map((record, i) => (
            <div key={record.Id} selected={record.Id}>
              <div className="list-group"></div>
              <h5>{record.Name}</h5>
              <h4>{record.Phone}</h4>
              <p>{record.Account.Name}</p>
            </div>
          ))}
        <div className="list-group-header">
          <form style={FORM_STYLE} onSubmit={this.handleOnSubmit}>
            <input
              type="text"
              className="form-control"
              placeholder="New room"
              onChange={this
              .handleChange
              .bind(this)}
              value={this.state.roomName}/>
            <button className="btn btn-default" style={BUTTON_STYLE}>
              <span className="icon icon-plus"/>
            </button>
          </form>
        </div>
      </div>
    );
  }

  // Trying to get selected contact and render in Pane

  renderRoom() {
    if (this.props.children) {
      return this.props.children;
    } else {
      console.log(this.props.records)
      return (
        <div className="text-center">
          <div style={ICON_CHAT_STYLE}>
            <span className="icon icon-chat"/>
          </div>
          <p>
            No Contact Selected
          </p>
        </div>
      );
    }
  }

  render() {
    return (
      <div className="pane-group">
        <div className="pane-sm sidebar">{this.renderRoomList()}</div>
        <div className="pane">{this.renderRoom()}</div>
      </div>
    );
  }
}