Reagieren Zustand Schritt nicht Ansicht Aktualisierung

Question

Ich habe folgendes:

class PickColor extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      active: 0 
     } 

     this.setState = this.setState.bind(this); 
    } 

    setActiveClass() { 
     this.setState({ active:this.state.active + 1 }) 
    } 

    backToPrevious (e) { 
     e.preventDefault(); 
     this.props.actionID(1); 
     this.props.activeNav('case-0'); 
    } 
    goToNext (e) { 
     e.preventDefault(); 
     this.props.actionID(3); 
     this.props.activeNav('case-2'); 
     this.props.setNavB(true); 
     this.props.setIconsHolderOnOff(true); 
    } 
    getColorValue(event) { 
     var color_id = event.target.getAttribute("data-color-name"); 
     this.props.colorName(color_id); 
     this.props.setColorTextID(event.target.getAttribute("data-color-id")); 
     this.setActiveClass(); 
    } 
    getColorFromCode(color){ 
     var className; 

     switch (color) { 
      case "fc0d1b": 
       className = 'red'; 
      break; 
      case "fed343": 
       className = 'yellow'; 
      break; 
      case "2afd82": 
       className = 'green'; 
      break; 
      case "2af3fd": 
       className = 'blue'; 
      break; 
      case "a025fb": 
       className = 'purple'; 
      break; 
     } 

     return className; 
    } 
    getActiveForm() { 
     if (this.props.show === 2) { 
      return "show-form"; 
     } 
     else { 
      return ""; 
     } 
    } 

    render() { 
     console.log(this.state.active); 
     var activeForm = this.getActiveForm(this.props.show); 
     var colorsLink = [], 
      that = this, 
      colorInfo ; 

     this.props.colors.forEach(function(el, i) { 
      colorsLink.push(<li 
           data-color-id={el.id} 
           data-color-name={that.getColorFromCode(el.background_color)} 
           className={that.props.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 
           key={el.background_color} 
           onClick={that.getColorValue.bind(that)}> 
          </li> 
      ); 
     }); 

     if (this.props.currentState.activeColorTextID != "") { 
      colorInfo = <ColorInfo colors={this.props.colors} colorID={this.props.currentState.activeColorTextID} /> 
     } 

     return (
      <section className={"colors form " + activeForm}> 
       <h2>Pick your<br /> color</h2> 
       <ul> 
        {colorsLink} 
       </ul> 
       <div className="color-info-wrapper"> 
        {colorInfo} 
       </div> 
       <button className="back" onClick={this.backToPrevious.bind(this)}><span>back</span></button> 
       <button className="next" onClick={this.goToNext.bind(this)}><span>continue</span></button> 
      </section> 
     ); 
    } 
} 

ich assigna Klasse von aktiven onClick bin versucht, aber es scheint nicht überhaupt aufgenommen werden.

Answer 1

Ich denke, Sie beziehen sich props.active anstelle von state.active ... sonst bin ich nicht sicher, der Punkt, active im Zustand zu haben.

className={that.props.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 

sollte that.state.active == i ? 'active' ...

auch sein, Sie könnten Ihre colorsLink Array vereinfachen aus einer Karte erstellt werden, anstatt auf der Liste der Iterieren und Stösse mit. Maps geben ein neues Array zurück, Sie tun dies manuell, indem Sie forEach und push kombinieren.

var colorsLink = this.props.colors.map(function(el, i) { 
    return <li 
       data-color-id={el.id} 
       data-color-name={that.getColorFromCode(el.background_color)} 
       className={that.state.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 
       key={el.background_color} 
       onClick={that.getColorValue.bind(that)}> 
      </li>; 
    });