Question

我有一个父组件[MainLayout]，它有一个子[ListItems]并且有多个子组件[ListItem]。

如何在[MainLayout]组件中获取所点击的子项[ListItem]的值？

＆＃13;

/* index.js */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute } from 'react-router'
import ListItems from './components/listitems';

class MainLayout extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            selectedItem: null
        };

        this.getTracks = this.getTracks.bind(this);

        this.listItemClicked = this.listItemClicked.bind(this);

        this.getTracks();

    }

    listItemClicked(item) {
        console.log(item);
    }

    getTracks() {

fetch('https://api.spotify.com/v1/search?q=newman&type=track&market=US')
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({items: responseJson.tracks.items});
                    console.log(responseJson);
                    return responseJson;
                });
    }

    render() {
        return (
            <div>
                {this.props.children && React.cloneElement(this.props.children, {
                    items: this.state.items,
                    onListItemClicked: this.listItemClicked
                })}
            </div>
        );
    }
}

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
        <div>
            <ListItems onListItemClick={this.props.onListItemClicked} items={this.props.items} />
        </div>
    );
  }

}


/* listitems.js */

import React, {Component} from 'react';
import ListItem from './listitem';

const ListItems = (props) => {

    const allitems = props.items.map((item) => {
        return (
            <ListItem onListItemClick={props.onListItemClick} item={item} key={item.id} />
        )
    });


        return (
            <ul className="list-group">
                {allitems}
            </ul>
        );


}
export default ListItems;

/* listitem.js */

import React, {Component} from 'react';

class ListItem extends Component {

    constructor (props) {
        super(props);
    }

    render() {
        return (
            <div className="">
                <h4 onClick={this.props.onListItemClick}>{this.props.item.album.artists['0'].name} - {this.props.item.name}</h4>
            </div>
        );
    }

}
export default ListItem;

＆＃13;

感谢您的回答！

Answer 1

您可以找到所需的解决方案here。

但我建议你使用Redux或Flux这样的独立架构。我知道你想要一个开销较少的答案，但请相信我，使用它可以节省你很多时间，并有效地处理每一个州。我将讨论Redux，因为我只使用Redux。

Redux如何解决您的问题？

您需要的所有数据都存储在Redux商店中，可以从任何页面访问，更改。如果您想要更改任何属性，可以使用名为dispatch()的方法来帮助您这样做。要从商店访问值，您可以使用@connect()装饰器。

要了解有关调度员的更多信息，请参阅此link。

要了解@connect（）装饰器，请参阅此link。

可以找到Redux和Flux之间的差异here和here。

Answer 2

在列表项中

，您可以调用onListItemClick并将项目作为参数传递，如onClick={() => { this.props.onListItemClick(this.props.item); }}

/* listitem.js */

import React, {Component} from 'react';

class ListItem extends Component {

    constructor (props) {
        super(props);
    }

    render() {
        return (
            <div className="">
                <h4 onClick={() => { this.props.onListItemClick(this.props.item); }}>{this.props.item.album.artists['0'].name} - {this.props.item.name}</h4>
            </div>
        );
    }

}
export default ListItem;

react.js在父组件中获取子值

2 个答案:

Redux如何解决您的问题？