我有一个父组件 [MainLayout],它有一个子组件 [ListItems],还有多个子组件 [ListItem]。
如何获取[MainLayout]组件中被点击的子[ListItem]的值?
/* 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;
感谢您的回答!
最佳答案
可以找到你想要的解决方案here .
但我建议您使用任何单独的架构,例如 Redux或 Flux .我知道你想要一个开销更少的答案,但相信我,使用它会为你节省很多时间,而且它们可以有效地处理每一个状态。我将谈论 Redux,因为我只在 Redux 上工作过。
Redux 如何解决你的问题?
您需要的所有数据都存储在 Redux 存储中,可以从任何页面访问和更改。当您想要更改任何属性时,可以使用名为 dispatch()
的方法来帮助您这样做。为了访问存储中的值,您可以使用 @connect()
装饰器。
要了解有关调度程序的更多信息,请参阅此 link .
要了解 @connect() 装饰器,请参阅此 link .
关于javascript - react.js 在父组件中获取子值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40759461/