anwenden permenant Klasse mit onMouseEnter in reagieren

Question

Wie Klasse anwenden, die bleiben? Ich muss eine else-Anweisung verwenden, die die Klasse auf null zurücksetzt. Wenn ich die else-Anweisung nicht erhalte, erhalte ich einen Fehler.

https://fiddle.jshell.net/8wsr7xa1

class App extends React.Component { 
    constructor(props){ 
     super(props) 

     this.state = { 
      active: null 
     } 
    } 

    onMouseEnter(item){ 
    this.setState({active: item}) 
    } 

    render(){ 
     const items = [1,2,3,4,5]; 
     return (
      <div> 
       {items.map((obj,i) => 
        <div 
        key={i} 
        style={this.state.active === obj ? 
        {backgroundColor: 'yellow'} : {}} 
        onClick={this.onMouseEnter.bind(this, obj)}> 
        {obj} 
        </div> 
       )} 
      </div> 
     ); 
    } 
} 

Answer 1

Es war schwer, um Ihre Frage zu verstehen, aber ich gehe davon aus das ist, was Sie zu tun versuchen?

https://fiddle.jshell.net/8wsr7xa1/6/

class App extends React.Component { 
    constructor(props){ 
     super(props) 

     this.state = { 
      actives: [] 
     } 
    } 

    onMouseEnter(item){ 
    let actives = [].concat(this.state.actives); 
    if (actives.indexOf(item) === -1) { actives.push(item) } 
    this.setState({actives}); 
    } 

    render(){ 
     const items = [1,2,3,4,5]; 
     return (
      <div> 
       {items.map((obj,i) => 
       <div 
        key={i} 
        style={this.state.actives.indexOf(obj) > -1 ? 
        {backgroundColor: 'yellow'} : {}} 
        onMouseEnter={this.onMouseEnter.bind(this, obj)}> 
        {obj} 
        </div> 
       )} 
      </div> 
    ); 
    } 
} 

React.render(
<App name="World"/ >, 
document.getElementById('app') 
);