最初の要素をクリックすると反応するjs

Question

ユーザーが要素をクリックして要素にクラスを追加すると、以下のコードが繰り返されます。コンポーネントの取得時にループの最初の要素をクリックしますクラスを追加するか、どちらかを追加します。

いずれか実行可能です。

私はあなたがこのようなため componentDidMountを使用することができると思う

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