Question

我在尝试可视化甚至考虑如何将其抽象为组件时遇到了问题。

我正在尝试做的是在我的主页面上进行API调用以加载数据（不在数组中的对象）并在左侧面板上显示它们。这部分工作正常，数据加载正确。

我遇到的问题是尝试将与我点击的链接相关的所有数据加载到右侧面板中。

我现在只在左侧面板上显示名称而不显示其余数据。我需要以某种方式显示与我点击的链接相关联的对象中的所有数据。

我的家js

import React from 'react';
import ContactContainer from '../components/contacts';
import ContactDetails from '../views/contact-details';


class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  render() {
    if (!this.state.data) {
      return null;
    }

    return (
      <div>
        <ContactContainer />
        <ContactDetails />
      </div>
    );
  }
}

export default Home;

右侧面板应显示链接点击的对象数据

import React from 'react';


class ContactDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  render() {
    if (!this.state.data) {
      return null;
    }

    console.log(this.props)

    return (
      <div>Weeeee</div>
    );
  }
}

export default ContactDetails;

我加载数据的主要组件

import React from 'react';
import { Link } from 'react-router';
import SearchFilter from '../components/search';


class Contact extends React.Component {
  handleClick() {
    console.log(this.props.items)
  }

  render() {
    var content;
    var self = this;
    if (this.props.items.length > 0) {
      var items = this.props.items.map(function(item) {
        return (
          <div className="list-item" key={item.person_id}>
            <h5 className="event-title">
              <a href="#" onClick={self.handleClick.bind(self, item.person_id)}>{item.name}</a>
            </h5>
          </div>
        )
      });

      content = {items}
    } else {
      content = <p>No items matching this filter</p>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}


class ContactContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      nameFilter: ''
    };
  }

  componentWillMount() {
    this.loadEvents('./javascript/api/people.json');
  }

  loadEvents(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      success: function(data) {
        this.setState({
          data: data
        });
      }.bind(this),
      error: function(xhr, status, err, data) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

  inputFilterUpdate(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  }

  _hasData() {
    var displayedItems = this.state.data.filter(function(person) {
      var contactName = person.name.toLowerCase(),
          contactNameFilter = this.state.nameFilter.toLowerCase();

      return contactName.indexOf(contactNameFilter) > -1;
    }.bind(this));

    return (
      <div className="contact-list">
        <div className="contact-list__search">
          <SearchFilter updateFilter={this.inputFilterUpdate.bind(this)} />
        </div>
        <div className="contact-list__view">
          <Contact items={displayedItems} />
        </div>
      </div>
    );
  }

  render() {
    if (this.state.data) {
      return (
        <div>
          {this._hasData()}
        </div>
      )          
    } else {
      return <div>Loading...</div>;
    }

    return false
  }
}

export default ContactContainer;

任何帮助都将不胜感激。

响应链接点击加载数据到右侧面板

0 个答案: