У меня
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
Двумя способами, о которых я могу думать, являются
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
Надеюсь, это поможет.
Ответ 2
Почему не просто:
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.
Ответ 3
Вот как вы определяете реакцию обработчика события onClick, который отвечал на заголовок вопроса... используя синтаксис es6
import React, { Component } from 'react';
export default class Test extends Component {
handleClick(event) {
event.preventDefault()
var el = event.target
console.log(el)
}
render() {
return (
<a href='#' onClick={this.handleClick.bind(this)}>click me</a>
)
}
}
Ответ 4
Использовать ECMA2015. Функции стрелок делают "this" более интуитивным.
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'));`
Ответ 5
Если вы используете 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;
Обратите внимание, что каждый динамически созданный элемент должен иметь уникальный ссылочный "ключ".
Кроме того, если вы хотите передать фактический объект данных (а не событие) в свою функцию 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>
)}
)}
Ответ 6
Обработка событий с помощью элементов реагирования очень похожа на обработку событий на элементах DOM. Существуют синтаксические различия:
- Реагировать события называются с помощью camelCase, а не в нижнем регистре.
- С JSX вы передаете функцию как обработчик события, а не строку.
Итак, как упоминалось в документации Реагировать, они очень похожи на обычный HTML, когда дело доходит до обработки событий, но имена событий в React используют camelcase, потому что они на самом деле не HTML, они JavaScript, также, вы передаете функцию во время передачи вызова функции в формате строки для HTML, они разные, но концепции довольно похожи...
Посмотрите на приведенный ниже пример, обратите внимание на способ передачи события функции:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
Ответ 7
Лучший способ использования события onclick: - Pass Paramter также
moreService(serviceList,e){
this.setState({serviceList:serviceList,parentid:serviceList.sid})
var updatebreadcrumb = this.props.updatebreadcrumb;
updatebreadcrumb(serviceList);
}
onClick={(e)=>this.moreService(value,e)}
Ответ 8
Прошу прокомментировать, если вы занижены. Это нестандартная (но не столь необычная) модель React, которая не использует JSX, вместо этого ставит все в ряд. Кроме того, это Coffeescript.
"Реагировать" для этого будет с собственным состоянием компонента:
(c = console.log.bind console)
mock_items: [
{
name: 'item_a'
uid: shortid()
}
{
name: 'item_b'
uid: shortid()
}
{
name: 'item_c'
uid: shortid()
}
]
getInitialState: ->
lighted_item: null
render: ->
div null,
ul null,
for item, idx in @mock_items
uid = item.uid
li
key: uid
onClick: do (idx, uid) =>
(e) =>
# justf to illustrate these are bound in closure by the do lambda,
c idx
c uid
@setState
lighted_item: uid
style:
cursor: 'pointer'
background: do (uid) =>
c @state.lighted_item
c 'and uid', uid
if @state.lighted_item is uid then 'magenta' else 'chartreuse'
# background: 'chartreuse'
item.name
В этом примере работает - я тестировал его локально.
Вы можете проверить этот примерный код точно в my github.
Первоначально env был только локальным для моих собственных целей r & d, но я отправил его в Github для этого. Он может быть написан в какой-то момент, но вы можете проверить фиксацию с 8 сентября 2016 года, чтобы увидеть это.
В более общем плане, если вы хотите увидеть, как работает этот шаблон CS/no-JSX для React, просмотрите недавнюю работу здесь. Возможно, у меня будет время полностью реализовать POC для этой идеи приложения, стек для которой включает NodeJS, Primus, Redis и React.
