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

Question

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

只要可行即可。

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>
    )
})

Answer 1

我认为您可以使用 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>
    )
})