私は持っている
var TestApp = React.createClass({
getComponent: function(){
console.log(this.props);
},
render: function(){
return(
<div>
<ul>
<li onClick={this.getComponent}>Component 1</li>
</ul>
</div>
);
}
});
React.renderComponent(<TestApp />, document.body);
クリックされたリスト要素の背景に色を付けたいです。React でこれをどうやって実現できますか?
何かのようなもの
$('li').on('click', function(){
$(this).css({'background-color': '#ccc'});
});
ベストアンサー1
なぜだめですか：
onItemClick: function (event) {
event.currentTarget.style.backgroundColor = '#ccc';
},
render: function() {
return (
<div>
<ul>
<li onClick={this.onItemClick}>Component 1</li>
</ul>
</div>
);
}
さらに React 的にしたい場合は、選択した項目をそれを含む React コンポーネントの状態として設定し、その状態を参照して項目の色を決定することもできますrender。
onItemClick: function (event) {
this.setState({ selectedItem: event.currentTarget.dataset.id });
//where 'id' = whatever suffix you give the data-* li attribute
},
render: function() {
return (
<div>
<ul>
<li onClick={this.onItemClick} data-id="1" className={this.state.selectedItem == 1 ? "on" : "off"}>Component 1</li>
<li onClick={this.onItemClick} data-id="2" className={this.state.selectedItem == 2 ? "on" : "off"}>Component 2</li>
<li onClick={this.onItemClick} data-id="3" className={this.state.selectedItem == 3 ? "on" : "off"}>Component 3</li>
</ul>
</div>
);
},
<li>これらの をループに入れたい場合は、li.onとli.offスタイルを に設定する必要がありますbackground-color。