blocks|key|26603|text|我能想到的两种方式是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26604|var+TestApp+=+React.createClass({
++++getComponent:+function(index)+{
++++++++$(this.getDOMNode()).find('li:nth-child('+%2B+index+%2B+')').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'));|code-block|syntax|javascript|26605|这是我个人的最爱。|26606|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('+%2B+index+%2B+')').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'));|26607|这是一个DEMO|offset|length|26608|我希望这能帮到你。|26609|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ginune/2/^0|0|0|0|0|4|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Two ways I can think of are </p>

<pre><code>var TestApp = React.createClass({
    getComponent: function(index) {
        $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({
            'background-color': '#ccc'
        });
    },
    render: function() {
        return (
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li onClick={this.getComponent.bind(this, 1)}&gt;Component 1&lt;/li&gt;
                &lt;li onClick={this.getComponent.bind(this, 2)}&gt;Component 2&lt;/li&gt;
                &lt;li onClick={this.getComponent.bind(this, 3)}&gt;Component 3&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
        );
    }
});
React.renderComponent(&lt;TestApp /&gt; , document.getElementById('soln1'));
</code></pre>

<p>This is my personal favorite.</p>

<pre><code>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 (
            &lt;li onClick={this.handleClick} style={style}&gt;{this.props.content}&lt;/li&gt;
        );
    }
});

var TestApp2 = React.createClass({
    getComponent: function(index) {
        $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({
            'background-color': '#ccc'
        });
    },
    render: function() {
        return (
            &lt;div&gt;
             &lt;ul&gt;
              &lt;ListItem content="Component 1" /&gt;
              &lt;ListItem content="Component 2" /&gt;
              &lt;ListItem content="Component 3" /&gt;
             &lt;/ul&gt;
            &lt;/div&gt;
        );
    }
});
React.renderComponent(&lt;TestApp2 /&gt; , document.getElementById('soln2'));
</code></pre>

<p>Here is a <a href="http://jsbin.com/ginune/2/" rel="noreferrer">DEMO</a></p>

<p>I hope this helps.</p>


blocks|key|26652|text|为什么不呢：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26653|onItemClick:+function+(event)+{

++++event.currentTarget.style.backgroundColor+=+'#ccc';

},

render:+function()+{
++++return+(
++++++++<div>
++++++++++++<ul>
++++++++++++++++<li+onClick={this.onItemClick}>Component+1</li>
++++++++++++</ul>
++++++++</div>
++++);
}|code-block|syntax|javascript|26654|如果您想对其进行更多的反应，您可能希望将选定项设置为其包含的React组件的状态，然后引用该状态来确定项在render中的颜色|offset|length|style|CODE|26655|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>
++++);
},|26656|您可能希望将这些<li>放入循环中，并且需要让li.on和li.off样式设置您的background-color。|26657|entityMap^0|0|0|1H|6|0|0|8|4|N|5|T|6|15|G|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$]]

<p>Why not:</p>

<pre><code>onItemClick: function (event) {

    event.currentTarget.style.backgroundColor = '#ccc';

},

render: function() {
    return (
        &lt;div&gt;
            &lt;ul&gt;
                &lt;li onClick={this.onItemClick}&gt;Component 1&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    );
}
</code></pre>

<p>And if you want to be more React-ive about it, you might want to set the selected item as state of its containing React component, then reference that state to determine the item's color within <code>render</code>:</p>

<pre><code>onItemClick: function (event) {

    this.setState({ selectedItem: event.currentTarget.dataset.id });
    //where 'id' =  whatever suffix you give the data-* li attribute
},

render: function() {
    return (
        &lt;div&gt;
            &lt;ul&gt;
                &lt;li onClick={this.onItemClick} data-id="1" className={this.state.selectedItem == 1 ? "on" : "off"}&gt;Component 1&lt;/li&gt;
                &lt;li onClick={this.onItemClick} data-id="2" className={this.state.selectedItem == 2 ? "on" : "off"}&gt;Component 2&lt;/li&gt;
                &lt;li onClick={this.onItemClick} data-id="3" className={this.state.selectedItem == 3 ? "on" : "off"}&gt;Component 3&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    );
},
</code></pre>

<p>You'd want to put those <code>&lt;li&gt;</code>s into a loop, and you need to make the <code>li.on</code> and <code>li.off</code> styles set your <code>background-color</code>.</p>


blocks|key|26708|text|如果您使用的是ES6，下面是一些简单的示例代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26709|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;|code-block|syntax|javascript|26710|在ES6类体中，函数不再需要'function‘关键字，也不需要用逗号分隔。如果愿意，您也可以使用=>语法。|26711|下面是一个动态创建元素的示例：|26712|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;|26713|注意，每个动态创建的元素都应该有一个唯一的引用'key‘。|26714|此外，如果您希望将实际的数据对象(而不是事件)传递到onClick函数中，则需要将其传递到绑定中。例如：|26715|新的onClick函数：|26716|getComponent(object)+{
++++console.log(object.name);
}|26717|传入数据对象：|26718|{this.state.data.map(d+=>+{
++++return(
++++++<li+key={d.id}+onClick={this.getComponent.bind(this,+d)}>{d.name}</li>
++++)}
)}|26719|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>If you're using ES6, here's some simple example code:</p>

<pre><code>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(
       &lt;div&gt;
         &lt;ul&gt;
            &lt;li onClick={this.getComponent.bind(this)}&gt;Component 1&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;
    );
  }
}

export default TestApp;
</code></pre>

<p>In ES6 class bodies, functions no longer require the 'function' keyword and they don't need to be separated by commas. You can also use the => syntax as well if you wish.</p>

<p>Here's an example with dynamically created elements:</p>

<pre><code>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() {        
       &lt;div&gt;
         &lt;ul&gt;
         {this.state.data.map(d =&gt; {
           return(
              &lt;li key={d.id} onClick={this.getComponent.bind(this)}&gt;{d.name}&lt;/li&gt;
           )}
         )}
         &lt;/ul&gt;
       &lt;/div&gt;
    );
  }
}

export default TestApp;
</code></pre>

<p>Note that each dynamically created element should have a unique reference 'key'.</p>

<p>Furthermore, if you would like to pass the actual data object (rather than the event) into your onClick function, you will need to pass that into your bind. For example:</p>

<p>New onClick function: </p>

<pre><code>getComponent(object) {
    console.log(object.name);
}
</code></pre>

<p>Passing in the data object:</p>

<pre><code>{this.state.data.map(d =&gt; {
    return(
      &lt;li key={d.id} onClick={this.getComponent.bind(this, d)}&gt;{d.name}&lt;/li&gt;
    )}
)}
</code></pre>


blocks|key|26735|text|使用ECMA2015。箭头函数使"this“更直观。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26736|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'));`|code-block|syntax|javascript|26737|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use ECMA2015. Arrow functions make "this" a lot more intuitive.</p>

<pre><code>import React from 'react';


class TestApp extends React.Component {
   getComponent(e, index) {
       $(e.target).css({
           'background-color': '#ccc'
       });
   }
   render() {
       return (
           &lt;div&gt;
             &lt;ul&gt;
               &lt;li onClick={(e) =&gt; this.getComponent(e, 1)}&gt;Component 1&lt;/li&gt;
               &lt;li onClick={(e) =&gt; this.getComponent(e, 2)}&gt;Component 2&lt;/li&gt;
               &lt;li onClick={(e) =&gt; this.getComponent(e, 3)}&gt;Component 3&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/div&gt;
       );
   }
});
React.renderComponent(&lt;TestApp /&gt; , document.getElementById('soln1'));`
</code></pre>


blocks|key|26769|text|您可以使用React.createClone方法。创建您的元素，然后创建它的克隆。在创建克隆的过程中，您可以注入道具。像这样注入一个onClick+:+method+prop|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26770|{+onClick+:+()+=>+this.changeColor(originalElement,+index)+}|offset|length|style|CODE|26771|changeColor方法将使用副本设置状态，允许您在进程中设置颜色。|26772|​|26773|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>
++++)
++}|code-block|syntax|javascript|26774|26775|entityMap^0|0|0|1O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Z|8|@]|9|@]|A|$O|P]]|$1|Q|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>You can make use of the React.createClone method. Create your element, than create a clone of it. During the clone's creation, you can inject props. Inject an onClick : method prop like this </p>

<p><code>{ onClick : () =&gt; this.changeColor(originalElement, index) }</code></p>

<p>the changeColor method will set the state with the duplicate, allowing you sto set the color in the process.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>render()
  {
    return(
      &lt;ul&gt;

        {this.state.items.map((val, ind) =&gt; {
          let item = &lt;li key={ind}&gt;{val}&lt;/li&gt;;
          let props = { 
            onClick: () =&gt; this.Click(item, ind),
            key : ind,
            ind
          }
          let clone = React.cloneElement(item, props, [val]);
          return clone;
        })}

      &lt;/ul&gt;
    )
  }</code></pre>
</div>
</div>
</p>


blocks|key|4534255|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4534256|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;|code-block|syntax|javascript|4534257|4534258|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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(
       &lt;div&gt;
         &lt;ul&gt;
            &lt;li onClick={this.getComponent.bind(this)}&gt;Component 1&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;
    );
  }
}

export { MyComponent };  // use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent'
export default MyComponent;</code></pre>
</div>
</div>
</p>


blocks|key|26815|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26816|class+FrontendSkillList+extends+React.Component+{
++constructor()+{
++++super();
++++this.state+=+{+selectedSkill:+{}+};
++}
++render()+{
++++return+(
++++++<ul>
++++++++{this.props.skills.map((skill,+i)+=>+(
++++++++++++<li
++++++++++++++className={
++++++++++++++++this.state.selectedSkill.id+===+skill.id+?+"selected"+:+""
++++++++++++++}
++++++++++++++onClick={this.selectSkill.bind(this,+skill)}
++++++++++++++style={{+cursor:+"pointer"+}}
++++++++++++++key={skill.id}
++++++++++++>
++++++++++++{skill.name}
++++++++++++</li>
++++++++))}
++++++</ul>
++++);
++}

++selectSkill(selected)+{
++++if+(selected.id+!==+this.state.selectedSkill.id)+{
++++++this.setState({+selectedSkill:+selected+});
++++}+else+{
++++++this.setState({+selectedSkill:+{}+});
++++}
++}
}

const+data+=+[
++{+id:+"1",+name:+"HTML5"+},
++{+id:+"2",+name:+"CSS3"+},
++{+id:+"3",+name:+"ES6+&+ES7"+}
];
const+element+=+(
++<div>
++++<h1>Frontend+Skill+List</h1>
++++<FrontendSkillList+skills={data}+/>
++</div>
);
ReactDOM.render(element,+document.getElementById("root"));|code-block|syntax|javascript|26817|.selected+{
++background-color:+rgba(217,+83,+79,+0.8);
}|26818|<script+src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div+id="root"></div>|26819|26820|@user544079希望这个demo能有所帮助:)我建议通过切换classname来改变背景颜色。|26821|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class FrontendSkillList extends React.Component {
  constructor() {
    super();
    this.state = { selectedSkill: {} };
  }
  render() {
    return (
      &lt;ul&gt;
        {this.props.skills.map((skill, i) =&gt; (
            &lt;li
              className={
                this.state.selectedSkill.id === skill.id ? "selected" : ""
              }
              onClick={this.selectSkill.bind(this, skill)}
              style={{ cursor: "pointer" }}
              key={skill.id}
            &gt;
            {skill.name}
            &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    );
  }

  selectSkill(selected) {
    if (selected.id !== this.state.selectedSkill.id) {
      this.setState({ selectedSkill: selected });
    } else {
      this.setState({ selectedSkill: {} });
    }
  }
}

const data = [
  { id: "1", name: "HTML5" },
  { id: "2", name: "CSS3" },
  { id: "3", name: "ES6 &amp; ES7" }
];
const element = (
  &lt;div&gt;
    &lt;h1&gt;Frontend Skill List&lt;/h1&gt;
    &lt;FrontendSkillList skills={data} /&gt;
  &lt;/div&gt;
);
ReactDOM.render(element, document.getElementById("root"));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.selected {
  background-color: rgba(217, 83, 79, 0.8);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>@user544079 Hope this demo can help :) I recommend changing background color by toggling classname.</p>


blocks|key|26833|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26834|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;|code-block|syntax|javascript|26835|26836|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p>I have </p>

<pre><code>var TestApp = React.createClass({
      getComponent: function(){
          console.log(this.props);
      },
      render: function(){
        return(
             &lt;div&gt;
             &lt;ul&gt;
                &lt;li onClick={this.getComponent}&gt;Component 1&lt;/li&gt;
             &lt;/ul&gt;
             &lt;/div&gt;
        );
      }
});
React.renderComponent(&lt;TestApp /&gt;, document.body);
</code></pre>

<p>I want to color the background of the clicked list element. How can I do this in React ?</p>

<p>Something like </p>

<pre><code>$('li').on('click', function(){
    $(this).css({'background-color': '#ccc'});
});
</code></pre>


React JS onClick event handler

我有过var TestApp = React.createClass({      getComponent: function(){          console.log(this.props);      },      render: function(){        return(           ...

问React JS onClick事件处理程序
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React JS onClick事件处理程序EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React JS onClick事件处理程序
EN