gpt4 book ai didi

javascript - 单击React js循环中的第一个元素

转载 作者:行者123 更新时间:2023-12-03 02:56:41 25 4
gpt4 key购买 nike

如果用户单击元素然后在元素上添加一个类,我想要做什么,而且,我有下面的重复代码,我想在加载组件或添加类时触发单击循环的第一个元素。

只要可行即可。

Object.keys(this.state.cdata).map((id,val) => {
return (
<div key={val} onClick={this.select.bind(this, this.state.cdata[id].id)} >
<div><i className="fa fa-globe" aria-hidden="true"></i>
<div className="country-name">{this.state.cdata[id].name}</div>
<input type="text" value={this.state.cdata[id].name} className="hidden" onChange={this.edit} onKeyPress={this.check}/>
</div>
</div>
)
})

最佳答案

我认为您可以使用 componentDidMount 来实现此目的:

componentDidMount() {
this.setState({ loaded: 'newClass' });
}

在您的代码中只需通过检查索引添加类

Object.keys(this.state.cdata).map((id,val) => {
return (
<div key={val} className={val === 0 && this.state.loaded} onClick={this.select.bind(this, this.state.cdata[id].id)} >
<div><i className="fa fa-globe" aria-hidden="true"></i>
<div className="country-name">{this.state.cdata[id].name}</div>
<input type="text" value={this.state.cdata[id].name} className="hidden" onChange={this.edit} onKeyPress={this.check}/>
</div>
</div>
)
})

关于javascript - 单击React js循环中的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47594153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com