javascript - 如何获取持有状态的“activeCat”对象的所有信息?
问题描述
我正在创建一个应用程序,我试图在其中建立一个“activeCat”,同时从下拉菜单中选择它。我可以切换“activeCat”的状态,但它只保存猫(对象)的“昵称”。
这是我的 CatList 组件(下拉列表)
import axios from 'axios';
import {Dropdown} from 'react-bootstrap';
export default class CatList extends Component {
constructor(props) {
super(props)
this.state = {
cats: [],
activeCat:''
}
}
onClickHandler = event => {
const activeCat = event.target.innerHTML;
this.setState({ activeCat })
console.log(activeCat)
{this.state.cats.map((cat, index)=>{
console.log(cat, index)
if(index == this.state.activeCat){
console.log(cat._id)
return(
<div >
Hello
</div>
)
}})}
}
componentDidMount() {
this.getCollection('All')
}
//get entire collection
getCollection = (_Id) => {
axios
.get(`http://localhost:5000/api/kittys/getByUserId/${this.props.user._id}`)
.then(res => {
const cats = res.data
this.setState({cats: cats})
})
}
render() {
return (
<div>
<p style={{display:"flex", justifyContent:"center"}}>Selected Cat: {this.state.activeCat}</p>
<Dropdown
style={{display:"flex", justifyContent:"center"}}
className="cat-list">
<Dropdown.Toggle variant="success" id="dropdown-basic">
My Cats
</Dropdown.Toggle>
<Dropdown.Menu>
{this
.state
.cats
.map((kitty, index) => {
return (
<div key={index}>
<Dropdown.Item onClick={this.onClickHandler}>{kitty.nickName}</Dropdown.Item>
</div>
)
})}
</Dropdown.Menu>
</Dropdown>
</div>
)
}
}
这是单击下拉菜单中的第一项后我的控制台的图片(米妮)
我希望能够像我一样在下拉菜单上方显示 ActiveCat 的名称,但我也希望其他猫的信息可用。
解决方案
您可以保存所有将其传递到您的点击处理程序中的小猫数据,而不是仅保存小猫名称。
<Dropdown.Item onClick={() => this.onClickHandler(kitty)}>{kitty.nickName}</Dropdown.Item>
然后将其保存在状态中。
onClickHandler = (kitty) => {
this.setState({ activeCat: kitty })
}
然后你就可以访问它了。
<p style={{display:"flex", justifyContent:"center"}}>Selected Cat: {this.state.activeCat.name} {this.state.activeCat.gender}</p>
推荐阅读
- node.js - 无法从 inversify-express-utils 控制器全局捕获错误
- ios - 如何在 Xcode 中更改 UIButton 的背景图像的不透明度?
- python - 想检查输入 x(有 5 列)在 python 中是否有不同的输出 y
- java - 如何仅对 .on() 中的语句进行连接或将连接转换为等效的数据?
- html - 禁用单击按钮,直到打开的选项卡关闭
- android - 如何为 android 构建颤振应用程序?
- draw.io - draw.io - 对象自动调整距离
- react-native - React Native App 在模拟器上崩溃
- javascript - 如何自动换行
标签?
- ios - 支持应用程序和扩展程序的 Swift 库