React JSのonClickイベントハンドラ
私は持っています
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'});
});
なぜだけではない：
onItemClick: function (event) {
event.currentTarget.style.backgroundColor = '#ccc';
},
render: function() {
return (
<div>
<ul>
<li onClick={this.onItemClick}>Component 1</li>
</ul>
</div>
);
}
そしてそれについてもっと反応的になりたいのであれば、選択した項目をそれを含む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をセットさせる必要があります。
私が考えることができる2つの方法があります
var TestApp = React.createClass({
getComponent: function(index) {
$(this.getDOMNode()).find('li:nth-child(' + index + ')').css({
'background-color': '#ccc'
});
},
render: function() {
return (
<div>
<ul>
<li onClick={this.getComponent.bind(this, 1)}>Component 1</li>
<li onClick={this.getComponent.bind(this, 2)}>Component 2</li>
<li onClick={this.getComponent.bind(this, 3)}>Component 3</li>
</ul>
</div>
);
}
});
React.renderComponent(<TestApp /> , document.getElementById('soln1'));
これは私の個人的なお気に入りです。
var ListItem = React.createClass({
getInitialState: function() {
return {
isSelected: false
};
},
handleClick: function() {
this.setState({
isSelected: true
})
},
render: function() {
var isSelected = this.state.isSelected;
var style = {
'background-color': ''
};
if (isSelected) {
style = {
'background-color': '#ccc'
};
}
return (
<li onClick={this.handleClick} style={style}>{this.props.content}</li>
);
}
});
var TestApp2 = React.createClass({
getComponent: function(index) {
$(this.getDOMNode()).find('li:nth-child(' + index + ')').css({
'background-color': '#ccc'
});
},
render: function() {
return (
<div>
<ul>
<ListItem content="Component 1" />
<ListItem content="Component 2" />
<ListItem content="Component 3" />
</ul>
</div>
);
}
});
React.renderComponent(<TestApp2 /> , document.getElementById('soln2'));
これが _ demo _ です。
これが役に立つことを願っています。
Es6構文を使用して質問のタイトルに答えていた react onClickイベントハンドラ を定義する方法は次のとおりです。
import React, { Component } from 'react';
export default class Test extends Component {
handleClick(e) {
e.preventDefault()
console.log(e.target)
}
render() {
return (
<a href='#' onClick={e => this.handleClick(e)}>click me</a>
)
}
}
ECMA2015を使用してください。矢印関数は "これ"をもっと直感的にします。
import React from 'react';
class TestApp extends React.Component {
getComponent(e, index) {
$(e.target).css({
'background-color': '#ccc'
});
}
render() {
return (
<div>
<ul>
<li onClick={(e) => this.getComponent(e, 1)}>Component 1</li>
<li onClick={(e) => this.getComponent(e, 2)}>Component 2</li>
<li onClick={(e) => this.getComponent(e, 3)}>Component 3</li>
</ul>
</div>
);
}
});
React.renderComponent(<TestApp /> , document.getElementById('soln1'));`
ES6を使用している場合は、次の簡単なコード例があります。
import React from 'wherever_react_is';
class TestApp extends React.Component {
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}
export default TestApp;
ES6クラス本体では、関数はもはや「function」キーワードを必要とせず、それらはコンマで区切る必要はありません。必要に応じて=>構文を使うこともできます。
これは動的に作成された要素を使った例です：
import React from 'wherever_react_is';
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{name: 'Name 1', id: 123},
{name: 'Name 2', id: 456}
]
}
}
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
<div>
<ul>
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this)}>{d.name}</li>
)}
)}
</ul>
</div>
);
}
}
export default TestApp;
動的に作成された各要素には、一意の参照 'key'が必要です。
さらに、（イベントではなく）実際のデータオブジェクトをonClick関数に渡したい場合は、それをバインドに渡す必要があります。例えば：
新しいonClick関数：
getComponent(object) {
console.log(object.name);
}
データオブジェクトを渡す：
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
React要素 でイベントを処理することは、DOM要素でイベントを処理することと非常によく似ています。構文上の違いがいくつかあります。
- リアクトイベントは小文字ではなくキャメルケースを使って命名されます。
- JSXでは、文字列ではなく関数をイベントハンドラとして渡します。
React ドキュメントで述べたように、イベント処理に関しては通常のHTMLと非常によく似ていますが、キャメルケースを使用したReactのイベント名は実際にはHTMLではないのでJavaScriptでもあります。 HTMLの文字列フォーマットで関数呼び出しを渡します、それらは異なりますが、概念はかなり似ています...
以下の例を見て、イベントが関数に渡される方法に注意してください。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
React.createCloneメソッドを利用することができます。そのクローンを作成するよりも、あなたの要素を作成します。クローンの作成中に、小道具を注入できます。このようなonClick：メソッドの小道具を注入します。
{ onClick : () => this.changeColor(originalElement, index) }
changeColorメソッドは複製を使用して状態を設定するため、プロセス内で色を設定する必要はありません。
render()
{
return(
<ul>
{this.state.items.map((val, ind) => {
let item = <li key={ind}>{val}</li>;
let props = {
onClick: () => this.Click(item, ind),
key : ind,
ind
}
let clone = React.cloneElement(item, props, [val]);
return clone;
})}
</ul>
)
}import React from 'react';
class MyComponent extends React.Component {
getComponent(event) {
event.target.style.backgroundColor = '#ccc';
// or you can write
//arguments[0].target.style.backgroundColor = '#ccc';
}
render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}
export { MyComponent }; // use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent'
export default MyComponent;2019+：React Hooksを使うべきです
react 16.8で導入： https://reactjs.org/docs/hooks-intro.html
フックとはフックはReactの機能を「フック」するための特別な機能です。たとえば、useStateは、React状態を機能コンポーネントに追加するためのフックです。
いつフックを使用しますか？関数コンポーネントを書いて、それに何らかの状態を追加する必要があることに気づいたら、以前はそれをクラスに変換しなければなりませんでした。これで、既存の機能コンポーネント内でフックを使用できます。
それは次のようになります。
import React, { useState } from 'react';
function Example() {
const [itemId, setItem] = useState();
return (
<div>
<ul>
<li onClick={() => setItem(1)} className={itemId == 1 ? "on" : "off"}>Component 1</li>
<li onClick={() => setItem(2)} className={itemId == 2 ? "on" : "off"}>Component 2</li>
<li onClick={() => setItem(3)} className={itemId == 3 ? "on" : "off"}>Component 3</li>
</ul>
</div>
);
}